Image

A single image on the page. Picked from the media library. Optional overlay, hover effect, and 3D depth parallax that turns a flat photo into a subtly moving parallax scene.

For multi-image layouts, use Carousel. For slideshows, use Carousel.

When to use it

Single hero image
Inline product / portrait shots
Decorative imagery between text sections
Click-through linked images (set Link URL)

When not to use it

Multiple images side by side — use Carousel
Slideshow / carousel — use Carousel
Background image on a section — use the Section's Background →

Image setting

Vector icons — use Lucide via the icon picker

Settings

Select Image — button

Opens the media library to pick an image. Once set, a Clear Image (×) button appears next to it.

Link URL — text input

Wraps the image in an anchor — whole-image click area. Leave empty for non-clickable images.

Fill Container — checkbox (default: off)

When on, the image fills its parent container, cropping if needed. The Width / Radius / Margin sliders below hide because the image geometry is now governed by the parent.

Use Fill Container when the image is inside a Rows cell, a Flip Box face, or a Section with Aspect or Fixed-px height.

Width — slider, 10–100% (default: 50)

Image width as a percentage of the parent. Hidden when Fill Container is on.

Radius — slider, 0–100px (default: 0)

Corner rounding. 0 = sharp; 8–16 = soft; 100 with a 1:1 source = circle.

Margin Top / Margin Bottom — sliders, 0–100px (default: 0)

Vertical spacing around the image.

Overlay — collapsible section

Adds a coloured overlay on top of the image, useful for darkening behind text.

Colour swatch — overlay tint
Opacity — slider, 0–100% (default: 50)

Hover Effect — button group: 6 named effects (toggleable, default: none)

Shine — slow specular sweep across the image
Slices — segmented slide reveal
Tilt 3D — mouse-reactive 3D tilt
Portal — depth-portal effect
Burn — heated edges, stylised burn-through
Thermal — false-colour heat-map look

These are named effects — different from generic zoom/lift hovers on other blocks. Click an active effect again to deselect.

Entrance animation

Shared widget at the bottom — preset, duration, delay for scroll-into-view animation.

3D Depth — section

Turns a flat photo into a subtle depth-aware parallax scene. The panel generates a depth map from the image, then animates parallax + chromatic + oscillation based on cursor position.

#### Generate Depth — button (when no depth map yet)

Asks the server to generate a depth map for the current image. Disabled if no image is set. Once generated, the controls below appear.

#### Strength — slider, 0–100 (default: 50)

Depth-parallax intensity. 0 disables the effect entirely; 100 is strong. Oscillation and chromatic shift are always on when Strength > 0.

Note: avoid transparent / cut-out images for 3D Depth — the depth generator works best on photos with full backgrounds.

Per-device overrides

Width, Radius, Margins, Hover Effect, and Strength all have separate Tablet and Mobile values. See concepts/responsive-overrides.

Common overrides:

Width — usually 100 on mobile (don't waste space)
Hover Effect — sometimes off on mobile (touch screens have no

cursor)

Common patterns

Hero image

Width 100 · Fill Container on · place inside a Section with Aspect 21:9 or 16:9 · use the Section's Overlay for darkening · Hover Effect Tilt 3D for motion.

Profile portrait

Width 60 · Radius 100 · 1:1 source image. Margin Top/Bottom 16 for breathing room.

Click-through inline photo

Width 80 · Radius 4 · Link URL set · Hover Effect Shine.

Depth-parallax hero

Set image · Generate Depth · Strength 60 · place in a wide Section. Move cursor in preview to see the parallax.

Don't

Don't use generic-zoom/lift hover language — Image's hover effects

are the 6 named ones; if you want zoom-on-hover, use a different block (Rows cell with Hover effect set, for example).

Don't enable 3D Depth on transparent / cut-out images — the depth

generator can't infer geometry behind transparent regions.

Don't pile Overlay + Burn + Tilt 3D — pick one treatment.
Don't paste low-res images. Source 1500–2500px wide for hero

images; the system doesn't upscale.

blocks/grid — multi-image galleries and grids
blocks/carousel — image slideshows
blocks/section — Section's Background → Image for full-width

background photography

concepts/responsive-overrides — per-device sizing