Overlay Grid
Usage
Overlay Grid displays a responsive grid of image cards that reveal extra detail on hover — headlines, subheadlines, colored overlays, or alternate photos depending on your settings. Use it for portfolios, service categories, team highlights, or any collection where the photo leads and copy appears on interaction.
All layout and styling controls apply uniformly across every card via parent block settings. Per-card content lives in the Cards repeater.
Parent settings
Select the Overlay Grid block for grid-wide options:
Layout
- Columns — 2 (default), 3, or 4 cards per row. The grid wraps to new rows as needed and reflows on smaller viewports.
- Spacing — gap between cards (0–20, default 4). Values map to
emat 0.25 per step. - Corners — Sharp (default) or Rounded on each card.
Text Position
Choose Inside (default) or Outside. This switches the card template entirely:
Inside — headline, subheadline, and optional link overlay the photo. Additional controls:
- Overlay Style — Solid (default), Gradient, or Photo (swap to Overlay Image on hover)
- Text Behavior — Show on Hover (default) or Always Show for inside copy and solid/gradient overlays
- Text Origin — nine-position grid for placing inside text (default center)
- Link Style — Understated (default), Button, or Hidden
- BG Overlay — overlay color for solid/gradient modes (default White). Hidden when Overlay Style is Photo.
- Overlay Opacity — 0–100 in steps of 5 (default 90). Hidden for Photo overlay style. Gradient direction follows Text Origin.
Outside — headline and subheadline sit below the photo. The link title appears as a hover overlay on the image instead. Additional controls:
- Overlay Style — Solid (default), Badge (circular call-to-action), or Photo
- Text Align — left, center (default), or right for below-image copy
- Overlay Text — typography preset for the hover overlay label (default
h3, or hidden). Hidden when overlay style is Badge (badge uses link title text).
Typography and color
- Headline Style — preset for card headlines (default
h4). Rendered ash3. - Subheadline Style — preset for subheadlines (default paragraph). Rendered as
p. - Reverse Print — light text treatment (default on). Use with dark overlays for readable copy.
Cards repeater
Use Add Card for each grid item:
- Image — main card photograph (golden-rectangle aspect)
- Overlay Image — shown when Overlay Style is Photo (inside or outside). Appears on hover.
- Headline — card title
- Subheadline — supporting line below the headline
- Link — ACF link; on the front end the entire card is clickable. Inside mode can show link text in the overlay; outside mode uses link title for badge/solid/photo hover labels.
Front-end behavior
Inside cards with Show on Hover fade copy and solid/gradient overlays in on hover (hover-group pattern). Photo overlay style swaps to Overlay Image on hover. Outside cards always hide the hover overlay until hover.
Block width
Overlay Grid supports Wide and Full alignment and defaults to Wide.
Tips
- Start with Text Position — Inside for magazine overlays, Outside for Grid-like cards with a hover call-to-action.
- Set Text Behavior to Always Show when hover discovery is not acceptable (e.g. touch-first content without hover equivalents).
- Use Photo overlay style when each card should reveal a second image on hover.
- For numbered breakout cards with a central theme bubble, see Breakout Grid instead.
Screenshots
Front-end
-
Inside vs. Outside text position examples on overlay grid cards.
Editor
-
Columns control sets cards per row (2, 3, or 4). -
Text Origin grid places inside copy on each card. -
Reverse Print toggles light text for readable overlays.
Settings
Overlay Grid
Cards per row: 2 (default), 3, or 4. Grid wraps and reflows on smaller viewports.
Inside (text overlays photo, default) or Outside (text below photo; link label on hover).
Inside text: Solid, Gradient, or Photo overlay on the card image. Photo uses per-card Overlay Image on hover.
Outside text: Solid, Badge (circular CTA), or Photo hover overlay on the image.
Inside text: Always Show or Show on Hover (default). Controls copy and solid/gradient overlay visibility.
Horizontal alignment for below-image copy when Text Position is Outside (default center).
Light text on dark overlays (default on). Prefer this over manually coloring individual text blocks.
Nine-position grid for inside text placement (default center). Gradient direction follows this origin.
Overlay color for Solid and Gradient styles (theme palette, default White). Hidden when Overlay Style is Photo.
Overlay strength for Solid and Gradient modes (0–100, default 90). Hidden for Photo style.
Gap between cards (0–20, default 4), applied as em spacing via grid-gap.
Sharp (default) or Rounded corner treatment on each card.
Typography preset for the hover overlay label when text is Outside (default h3, or hidden). Not used for Badge style.
Customizer preset for card headlines (default h4). Visual only — tag stays h3.
Customizer preset for card subheadlines (default paragraph). Visual only — tag stays p.
Understated, Button, or Hidden link display. Only when Text Position is Inside.
Repeater of grid cards. Each row: Image, optional Overlay Image, Headline, Subheadline, and Link.