Canvas Docs

Hover Cards

Image card that tilts in 3D under the pointer, with a title and category caption that lift toward the viewer. It is shown in the block inserter as Canvas Hover Card and registered as canvas-core/hover-card.

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

The Hover Cards 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 the card shows. Nothing is rendered until an image is set.

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

  • TitleDefaultEmpty

    Caption headline shown over the image. Leave it and the category empty for a picture with no caption at all.

  • Title LinkDefaultEmpty

    Optional. Wraps the title in a link.

  • Category / MetaDefaultEmpty

    Small line under the caption title, for a category, a date or a short credit.

  • Category LinkDefaultEmpty

    Optional. Wraps the category text in a link.

Settings

  • Image SizeDefaultFull

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

    ChoicesFullLargeMediumThumbnail

  • Title TagDefaultH2

    Heading level the caption title uses. Keep it in step with the headings around the card, or choose DIV to leave the card out of the page outline.

    ChoicesH2H3H4H5H6DIVSPAN

  • Always Show CaptionDefaultOff

    Keep the title and category permanently visible instead of revealing them on hover.

  • Title CSS ClassesDefaultmb-0

    Utility classes appended to the title element, after img-hover-title.

  • Grid ClassesDefaultEmpty

    Classes emitted BEFORE img-hover-wrap, for a card that doubles as its own grid cell (e.g. col-md-3).

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?