Overlay Content

One content layer inside an overlay: aligned, optionally masked, with trigger icons and nested blocks. It is shown in the block inserter as Canvas Overlay Content and registered as canvas-core/overlay-content.

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:

Content

• Trigger IconsDefaultEmpty

  The overlay chips: a play button, a zoom, a permalink arrow. Rendered before any nested blocks.

  Each row of Trigger Icons takes:

  • IconDefaultEmpty

    Glyph this chip shows, such as a play triangle or a magnifier. A row with no icon is left out entirely.

  • ElementDefaultEmpty

    Use a Span or Div when the whole card is already a link: a nested link is invalid HTML.

    ChoicesAuto (link when a URL is set) (empty)Link (a)Span - decorativeDiv - decorative

  • LinkDefaultEmpty

    Destination, or the media the lightbox opens.

  • Open in New TabDefaultOff

    Opens the link in a new browser tab. Use it for a destination that leaves your site.

  • Add rel="nofollow"DefaultOff

    Tells search engines not to pass ranking credit through this link. Use it for paid placements and links you do not vouch for.

  • Open in LightboxDefaultEmpty

    What the Link opens in the lightbox instead of navigating to.

    ChoicesNo - follow the link (empty)ImageVideo / iframeAjax (load a URL)Inline (#element)GalleryGallery item

  • SizeDefaultEmpty

    How large this chip is drawn. Large suits a single play button over a video; small suits a row of several chips.

    ChoicesDefault (40px) (empty)SmallLarge (64px)

  • BackgroundDefaultEmpty

    Colour of the disc behind the glyph. None leaves the glyph sitting straight on the picture.

    ChoicesNone (empty)LightDarkWhiteTheme colourPrimarySecondarySuccessDanger

  • Icon ColourDefaultEmpty

    Colour of the glyph itself. Inherit takes the colour from the overlay around it.

    ChoicesInherit (empty)DarkLightWhiteBlackTheme colour

  • Extra CSS ClassesDefaultEmpty

    Emitted between the size and the background, matching the design's own class order.

  • Icon Inline StyleDefaultEmpty

    Declarations on the glyph itself: a play triangle sits optically off-centre in a round chip and needs nudging.

  • Title AttributeDefaultEmpty

    Tooltip / accessible label for the chip.

  • Hover AnimationDefaultEmpty

    Played on the chip each time the pointer enters (e.g. fadeIn, zoomIn, op-1).

  • Hover Animation (Out)DefaultEmpty

    Played when the pointer leaves.

  • Hover Speed (ms)Default0

    Duration of the chip animation. 0 uses the design default.

  • Hover Delay (ms)Default0

    Stagger several chips to make them arrive one after another.

  • Hover TriggerDefaultEmpty

    Which part of the card a visitor has to hover over before this chip appears. Name the whole card so it reacts anywhere; leaving it empty makes the chip its own trigger, which for a chip that starts hidden means it can never be reached.

Settings

• Align (cross axis)DefaultEmpty

  Vertical placement while the layer flows in a row.

  ChoicesDefault (centre) (empty)StartCentreEndBaselineStretch

• Justify (main axis)DefaultEmpty

  Horizontal placement while the layer flows in a row.

  ChoicesDefault (centre) (empty)StartCentreEndSpace betweenSpace aroundSpace evenly

• DirectionDefaultEmpty

  Switching to a column swaps which axis Align and Justify control.

  ChoicesRow (empty)Row reversedColumnColumn reversed

• Text Mask GradientDefaultOff

  Shrink the layer to the bottom of the image and fade a dark gradient up behind it, so a caption stays legible over any photo.

• Dark SchemeDefaultOff

  Flip the layer to the dark colour scheme so headings and text read light-on-dark.

• Padding ClassesDefaultEmpty

  Spacing utilities for the layer, e.g. "p-5", "px-2 py-0", "p-0". Left empty the design's 20px default applies.

• Extra CSS ClassesDefaultEmpty

  Appended last, after every option above.

• Hover AnimationDefaultEmpty

  Animation played on the whole layer each time the pointer enters the Hover Trigger element (e.g. fadeIn, fadeInDownSmall, zoomIn).

• Hover Animation (Out)DefaultEmpty

  Animation played when the pointer leaves. Left empty the layer fades out.

  Shown when Hover Animation is "!="

• Hover Animation Speed (ms)Default0

  Duration of the hover animation. 0 uses the design default.

  Shown when Hover Animation is "!="

• Hover Animation Delay (ms)Default0

  Wait this long after the pointer enters before animating: stagger several layers to build a sequenced reveal.

  Shown when Hover Animation is "!="

• Hover TriggerDefaultEmpty

  Which part of the card a visitor has to hover over before the overlay animates in. Name the whole card so it reacts anywhere, or enter "self" to have the overlay react on its own. Left empty, the overlay layer is the trigger.

  Shown when Hover Animation is "!="

• Reset After HoverDefaultOff

  Return the layer to its hidden state when the pointer leaves instead of keeping the revealed state.

  Shown when Hover Animation is "!="

• Hover BreakpointDefaultEmpty

  Limit the hover animation to a breakpoint and up (e.g. "lg"). Enter "false" to require large screens. Pointer-less devices have no hover, so a reveal-only layer should set this.

  Shown when Hover Animation is "!="

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, Cascading Images, Charts, Circle Stack, Clients, Data Tables.