Canvas Docs

Overlay Item

An image card with an overlay stacked on top of it: badge, tint layer, and one or more overlay content layers. It is shown in the block inserter as Canvas Overlay Item and registered as canvas-core/overlay-item.

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

The Overlay Item settings in the block editor sidebar

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

  • ImageDefault0

    Picture behind the overlay. Nothing is rendered until one is set here or an address is given below.

  • Image URL FallbackDefaultEmpty

    Optional. Used when no attachment is selected. Attachment selection always wins.

  • Alt TextDefaultEmpty

    Optional. Leave empty to use the attachment alt text.

  • Second ImageDefault0

    Optional. A second image stacked behind the first: the design cross-fades to it on hover (the product card's alternate shot).

  • Second Image URL FallbackDefaultEmpty

    Optional. Used when no second attachment is selected.

  • Second Image Alt TextDefaultEmpty

    Optional. Leave empty to reuse the first image's alt text.

  • Image LinkDefaultEmpty

    Optional. Wraps each image in a link. Leave empty for an unlinked card.

  • Open Link in New TabDefaultOff

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

    Shown when Image Link is "!="

  • 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.

    Shown when Image Link is "!="

  • Badge TextDefaultEmpty

    Corner flash above the image (Sale, Out of Stock, New…). Leave empty for no badge.

  • Badge ColourDefaultSuccess

    Colour of that corner flash, taken from the theme palette. Choose None when your own classes supply the colour.

    ChoicesNone (badge classes only) (empty)PrimarySecondarySuccessDangerWarningInfoLightDarkTheme ColourShown when Badge Text is "!="

  • Badge CSS ClassesDefaultp-2

    Utility classes appended after the colour, e.g. "p-2 text-uppercase" or "rounded-0 fw-normal p-2".

    Shown when Badge Text is "!="

Settings

  • Card TypeDefaultPortfolio (portfolio-item / portfolio-image)

    Which wrapper class pair the card emits. "Media only" drops the outer element entirely so the card can sit in a Group alongside a sibling caption: which is how a project grid puts a title under the image.

    ChoicesPortfolio (portfolio-item / portfolio-image)Product (product / product-image)Custom classesMedia only - no outer wrapper

  • Card HTML TagDefaultARTICLE

    Element the whole card is built as. Choose LI when the card is one entry in a list, or FIGURE when it is a captioned picture.

    ChoicesARTICLEDIVSECTIONFIGURELIShown when Card Type is not "Media only - no outer wrapper"

  • Custom Card ClassesDefaultEmpty

    Class list for the outer card element. Replaces the preset pair.

    Shown when Card Type is "Custom classes"

  • Custom Image Wrapper ClassesDefaultEmpty

    Class list for the inner element that positions the overlay. Must establish a containing block (the overlay is absolutely positioned inside it).

    Shown when Card Type is "Custom classes"

  • Image SizeDefaultFull

    Which stored copy of the picture is served. Pick a smaller one when the card sits in a multi-column grid, so the page loads faster.

    ChoicesFullLargeMediumThumbnail

Overlay

  • Overlay CSS ClassesDefaultEmpty

    Utility classes appended to the overlay container itself (after bg-overlay).

  • Add Overlay Tint LayerDefaultOff

    Emit a bg-overlay-bg layer BEHIND the overlay content: the wash that darkens the image so the content stays readable.

  • Tint StyleDefaultEmpty

    Colour of the wash laid over the picture, which is what keeps the overlay text readable.

    ChoicesDefault (inverted contrast75%) (empty)TransparentDark schemeLight schemeSolid darkSolid lightTheme colourGradient - Purple / BlueGradient - Blue / PurpleGradient - Blue / GreenGradient - Green / BlueGradient - Horizonand 7 moreShown when Add Overlay Tint Layer is on

  • Tint OpacityDefaultEmpty

    How strong that wash is. Raise it when the picture is busy and the overlay text is hard to read.

    ChoicesStyle default (empty)0%10%20%30%40%50%60%70%80%90%100%Shown when Add Overlay Tint Layer is on

  • Tint CSS ClassesDefaultEmpty

    Utility classes appended after the style and opacity, e.g. "op-ts" to transition the tint on hover.

    Shown when Add Overlay Tint Layer is on

  • Tint Hover AnimationDefaultEmpty

    Animation played on the tint layer each time the pointer enters the Tint Hover Trigger (e.g. fadeIn, op-1).

    Shown when Add Overlay Tint Layer is on

  • Tint Hover Animation (Out)DefaultEmpty

    Animation played when the pointer leaves.

    Shown when Tint Hover Animation is "!="

  • Tint Hover Speed (ms)Default0

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

    Shown when Tint Hover Animation is "!="

  • Tint Hover Delay (ms)Default0

    Wait this long after the pointer enters before the tint animates.

    Shown when Tint Hover Animation is "!="

  • Tint Hover TriggerDefaultEmpty

    Which part of the card a visitor has to hover over before the tint appears. Name the whole card to have it react anywhere; leave it empty and only the tint layer itself triggers it, which for a full-bleed wash is the whole picture anyway.

    Shown when Tint Hover Animation is "!="

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.

Was this page helpful?