Overlay Grid
Grid of cards with text over a photo with an overlay, uniform or masonry, with ribbons and buttons
The examples are only part of the story. Every tile also has the advanced options: animations, mouse effects, visibility by device or by date, positioning and more.
01
Just added
This is how it looks as soon as you add it to the page, before any changes.
02
A tour operator's destinations
Three vertical 3:4 cards, text at the bottom left on a dark gradient overlay as wide as the card, an orange “News” ribbon and a “Discover” arrow.
03
The team in masonry: tall and wide cells
Four-column masonry layout on 200 px rows: some cards span two rows, others two columns; black-and-white photos that turn to color on hover.
04
A startup's services: photo, icons and graphics
Cards don't have to be photos: here a photo, a card with an icon on blue, one with the squares pattern on red and a text-only one on dark.
05
The rooms of the house, solid overlay and centered text
Two 16:9 columns with a red overlay over the whole photo, large centered heading and radius 24.
06
A fashion showcase in black and white
Five 2:3 columns joined together, no overlay or radius: black-and-white photos that turn to color on hover, name and price at the top left.
07
Photography courses, with ribbon and button
Three 4:5 cards with alternating corners (round, sharp), centered text at the bottom, a pill button “Subscribe”, a blue ribbon and a slight zoom with rotation on hover.
08
The “Magazine Mosaic” style for a magazine
The style raises the cards to 380 px, darkens the overlay and adds an underlined call to action: three articles from an architecture magazine.
