Rollover Cards

Build a grid of image cards with hover-reveal headlines and links.

Usage

Rollover Cards is a parent block: add Rollover Card children, each with an image and overlay text. Parent settings control grid columns, aspect ratio, typography, and hover behavior for every card.

When to use it

Use for team grids, portfolio tiles, or linked promo cards where the photo leads and copy appears on interaction. Keep overlay text short so it fits the crop.

Tips

  • Select the parent block for grid-wide options; select a child card to change that tile’s image and copy.
  • Aspect Ratio keeps the grid even when source photos differ.
  • Reverse Print helps light text on dark overlay backgrounds.

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
Overlay Opacity setting in the block editor sidebar
Overlay Opacity
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
Link URL
Link Text

Image

Image Focal Point