Rollover Cards

Build a grid of image cards with hover effects, headlines, and links.

Updated

Hovering a card reveals the overlay, description, and button while the other titles stay at the bottom.

Usage

Rollover Cards is a grid of image cards with text over each photo. Add a Rollover Card for each tile, then set its image, headline, and link. Settings on the parent Rollover Cards block control columns, aspect ratio, text style, overlay, and what appears on hover for every card.

When to use it

Use it for team members, portfolio tiles, services, or linked promo cards where the photo leads and the details appear on hover. Keep the text short so it fits over the photo.

Tips

  • Select the parent block for grid-wide settings. Select a single card to change its image and text.
  • Aspect Ratio keeps every card the same shape, even when your photos differ.
  • Set Text Color to light when the overlay is dark.

Screenshots

Front-end

  • Three image cards in a row, each with a title at the bottom of the photo.
    Three image cards in a row, each with a title at the bottom of the photo.
  • The middle card on hover — teal overlay, description, and a button over the photo.
    The middle card on hover — teal overlay, description, and a button over the photo.

Editor

  • A child card selected — headline, link, link text, and image focal point.
    A child card selected — headline, link, link text, and image focal point.
  • Rollover Cards sidebar — overlay style and opacity, what to show on hover, and link style.
    Rollover Cards sidebar — overlay style and opacity, what to show on hover, and link style.

Settings

Grid Settings

Columns setting in the block editor sidebar
Columns
  • 1
  • 2
  • 3default
  • 4
  • 5
  • 6
  • 7
Grid Gap setting in the block editor sidebar
Grid Gap
Aspect Ratio setting in the block editor sidebar
Aspect Ratio
Corners setting in the block editor sidebar
Corners
  • Sharp
  • Roundeddefault
  • Full

Content

Text Position setting in the block editor sidebar
Text Position
  • upper-left
  • upper
  • upper-right
  • left
  • centerdefault
  • right
  • lower-left
  • lower
  • lower-right
Card Padding setting in the block editor sidebar
Card Padding
Text Color setting in the block editor sidebar
Text Color
  • Dark
  • Light
Small Text setting in the block editor sidebar
Small Text

Headlines

Headline Tag setting in the block editor sidebar
Headline Tag
  • <h2>
  • <h3>default
  • <h4>
  • <h5>
  • <h6>
  • <p>
Headline Appearance setting in the block editor sidebar
Headline Appearance
  • <h1>
  • <h2>
  • <h3>default
  • <h4>
  • <h5>
  • <h6>
  • <p>
  • <strong>

Overlay

Overlay Style setting in the block editor sidebar
Overlay Style
  • Gradientdefault
  • Overlay
Overlay Color setting in the block editor sidebar
Overlay Color

Color of the overlay on the images. Changing it also sets Text Color when the overlay is strong enough to set the tone: a dark overlay from the default opacity up, a light one from 70% up. Change Text Color any time.

Overlay Opacity setting in the block editor sidebar
Overlay Opacity

Strength of the overlay, 0–100%, in steps of 1%. Dragging it also updates Text Color as the overlay starts or stops dominating the image; a dark overlay counts from the default opacity, a light one from 70%. Change Text Color any time.

Overlay Opacity on Hover setting in the block editor sidebar
Overlay Opacity on Hover

Reveal

Show Headline on Hover setting in the block editor sidebar
Show Headline on Hover
Show Body on Hover setting in the block editor sidebar
Show Body on Hover
Show Button on Hover setting in the block editor sidebar
Show Button on Hover
Link Style setting in the block editor sidebar
Link Style
  • Buttondefault
  • Understated
  • Minimal
  • Bold
Link Arrow setting in the block editor sidebar
Link Arrow

Appearance

Card Shadow setting in the block editor sidebar
Card Shadow
Shadow Weight setting in the block editor sidebar
Shadow WeightAvailable when Card Shadow is enabled
Shadow Size setting in the block editor sidebar
Shadow SizeAvailable when Card Shadow is enabled

Content

Headline setting in the block editor sidebar
Headline

The card headline. You can also edit it on the block.

Link URL setting in the block editor sidebar
Link URL

Where this card links. Link Text appears once a URL is set.

Link Text setting in the block editor sidebar
Link Text

The link label. Appears after you set Link URL.

Image

Image Focal Point setting in the block editor sidebar
Image Focal Point

Drag the dot to the part of the photo that should stay in view. It follows the image's focal point from the Media Library until you move it here; after that it's this block's own.