Overlay Grid
Keep an existing grid of photo cards with hover effects.
Usage
Overlay Grid is a grid of photo cards with a hover effect. Depending on its settings, hovering reveals a headline, a color overlay, or a second photo.
Overlay Grid is not in the block inserter. For a new grid, use Rollover Cards. Existing Overlay Grids keep working and can still be edited, duplicated, and copied to other pages.
Select the block to edit it. Settings near the top of the sidebar apply to every card. Each card has its own panel below them (Card 1, Card 2, and so on) with its photo, headline, subheadline, and link. Use Add Card at the bottom for another card, and Move Up, Move Down, and Remove Card inside a card's panel.
When to use it
Keep it where a page already has one. It suits portfolios, service categories, and team highlights where the photo leads.
Text Position changes the whole layout:
- Inside puts the headline, subheadline, and link on top of the photo.
- Outside puts the headline and subheadline below the photo, and shows the card's link text over the photo on hover.
A card's link makes the whole card clickable.
Tips
- With Show on Hover, larger screens show the text and overlay only on hover. Phones always show them.
- Choose Always Show when visitors need to read the text without hovering.
- Set Text Color to light when the overlay is dark.
- Overlay Style: Photo swaps in each card's Overlay Image on hover. Choose it in each card's panel.
- A card with no photo takes the height of the other cards in its row, so give at least one card in each row a photo.
Settings
Grid Settings
Cards per row on large screens. Cards rearrange on smaller screens.
The gap between cards.
Text
Inside puts the text over each photo. Outside puts it below, and shows the link text over the photo on hover.
Show the text and overlay only on hover, or all the time. Phones always show them. Appears when Text Position is Inside.
Where the text sits on each card. A Gradient overlay fades away from this side. Appears when Text Position is Inside.
Alignment for the text below each photo. Appears when Text Position is Outside.
Light text for dark overlays, dark text for light ones.
The heading look for card headlines. Changes the look only, not the page outline.
The text look for card subheadlines. Changes the look only, not the page outline.
How the link text shows on each card. Hidden keeps the card clickable without showing the text. Appears when Text Position is Inside.
Overlay
What covers the photo when text is Inside. Photo swaps in each card's Overlay Image on hover.
What appears over the photo on hover when text is Outside. Badge shows the link text in a round badge.
The overlay color. Hidden when Overlay Style is Photo.
How strong the overlay color is. A Gradient always shows at full strength. Hidden when Overlay Style is Photo.
The look of the link text shown over the photo on hover when text is Outside, or Hidden to turn it off. Not shown for Badge.