Cascading Images

Layered image composition with per-image translate, rotate, scale, z-index, animation delay, and optional decorative background shapes. It is shown in the block inserter as Canvas Cascading Images and registered as canvas-core/cascading-images.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Images

• ImagesDefaultEmpty

  The layers of the composition, stacked in the order you list them. Each row is one picture with its own position, angle and size.

  Each row of Images takes:

  • ImageDefault0

    The picture this layer shows, chosen from your media library.

  • Image Alt TextDefaultEmpty

    Overrides the media library alt text for this layer only.

  • X Offset (%)Default0

    Slides this layer left or right, as a percentage of its own width. Negative values move it left.

  • Y Offset (%)Default0

    Slides this layer up or down, as a percentage of its own height. Negative values move it up.

  • Rotation (deg)Default0

    Tilts this layer, in degrees. A few degrees is usually enough to make a stack read as a loose pile.

  • ScaleDefault0

    Grows or shrinks this layer against its natural size, where 1 leaves it alone. Leave it at 0 to add no sizing at all.

  • Z-IndexDefault0

    Which layers sit in front of which where they overlap. A higher number comes forward.

  • Animation Delay (ms)Default0

    How long this layer waits before it animates in, in thousandths of a second. Staggering the layers builds the composition up piece by piece.

  • Background ShapeDefaultOff

    Draws a solid block of colour behind this layer, which the settings below place and colour.

  • Shape Color ClassDefaultEmpty

    The palette colour the shape takes, named as a class such as bg-primary.

  • Shape Custom ColorDefaultEmpty

    An exact colour for the background shape, written as a colour value. It wins over the colour class above.

  • Shape X Offset (%)Default0

    Slides the background shape left or right behind its picture, so it peeks out on one side.

  • Shape Y Offset (%)Default0

    Slides the background shape up or down behind its picture.

  • Layer Padding ClassDefaultEmpty

    Spacing utility added to this layer so the composition can breathe (e.g. p-6).

  • Scroll ParallaxDefaultOff

    Drift this layer as the composition scrolls through the viewport.

  • Parallax TransformDefaultEmpty

    How far and in what direction this layer drifts as the page scrolls, written as a styling rule. Canvas counts the scroll from 0 as the layer enters the screen to 100 as it leaves, and the rule reads that count.

    Shown when Scroll Parallax is on

Style

• Padding (CSS value)DefaultEmpty

  Space held inside the composition around the layers, so an offset or rotated picture is not clipped at the edge.

• Border Radius ClassDefaultrounded-3

  How rounded the corners of every picture are, named as a class. Clear it for square corners.

• Shadow ClassDefaultshadow-lg

  The shadow under every picture, named as a class. It is what separates one layer from the one behind it. Clear it for flat layers.

• AnimationDefaultzoomIn faster

  The movement every layer makes as the composition comes into view, named by its effect. Clear it for layers that arrive without any movement.

Related

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Content: Background Video / Audio, Charts, Circle Stack, Clients, Data Tables, Google Map.