Overlay
Photo with a colored overlay and text that appear on hover, fading, rising or zooming
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
Three projects by an architecture firm
Three 4:5 panels side by side: at rest, just the photos; on hover, the dark overlay with the project name and year slides up from the bottom (“Slide Up” effect).
03
A travel agency's day trips, red overlay
Two 16:9 panels with asymmetric corners on a peach background: the transparency lives in the overlay color (red at 72%) and the opacity stays at 100%, so the text is solid.
04
The sale banner, full width
A single low panel (220 px) with an orange overlay and dark text, and the overlay zooming on hover: an invitation for a shop window.
05
The team, in circles
Three square portraits with a full radius: they become circles with a light blue overlay and name and role in the center.
06
Four museum pieces, with border and shadow
Four 3:4 panels on a dark background, a dark overlay at 45% in the color (solid text), a 2 px cream border and the tile's large shadow.
