ZENTU · WIDGET #113

Photos that unveil themselves — 20 reveal effects, six layouts from masonry to a hover list with a floating preview, and reveals that play on scroll, follow the scroll, or wait for a hover.

20 effects6 layoutsin view · scroll · hover · loadB&W → colorin-frame parallaxcolor lenshover list5 caption styles
Wanderlust Journal · Issue 12

Five friends, one very long hike

Jagged peaks, heavy backpacks and a lot of laughing on the way up.

Read the story

“Wanderlust Journal” is a fictional magazine used as an example.

PHOTOGRAPHER PORTFOLIO · GRID

Curtains alternate direction image by image, black-and-white photos turn to color as they open, and the numbers and captions slide in last.

curtainalternate directionB&W → colornumbersoverlay captions
Mountain lake
Mountain lakeLakes · 2026
Grand Canal
Grand CanalVenice · 2025
Temple lanes
Temple lanesKyoto · 2025
Golden hour
Golden hourBeaches · 2025
Boats from above
Boats from aboveAerial · 2026
City after dark
City after darkStreet · 2024
CREATIVE AGENCY · HOVER LIST

A big typographic list — hover a project and its photo opens with a circle reveal and floats after the mouse, tilting as it moves. On phones each row shows a thumbnail.

hover listfloating previewcircle revealtilt with speed

All project and client names are fictional.

TRAVEL BLOG · MASONRY

Masonry keeps every photo’s natural shape. Each one breaks apart from colored pixel tiles as you reach it, with the caption rising underneath.

masonrypixel tilesgradient covercaptions below
Hiking with friends
Hiking with friends12 min read
The quietest beaches
The quietest beaches8 min read
48 hours in Kyoto
48 hours in Kyoto10 min read
How we plan a route
How we plan a route6 min read
Venice without the crowds
Venice without the crowds9 min read
A month abroad on a budget
A month abroad on a budget7 min read
Mornings on the lake
Mornings on the lake5 min read
TRAVEL AGENCY · BENTO

The first photo takes the big tile. Blinds open stripe by stripe, a badge shows the price, and the cards lift on hover.

bentoblindscorner badgeslift on hover
Mountain lakes · from €890
Mountain lakes · from €890
Venice · from €540
Venice · from €540
Kyoto · from €1,290
Kyoto · from €1,290
Beach escapes · from €760
Beach escapes · from €760
Island hopping · from €980
Island hopping · from €980
Wellness retreats · from €650
Wellness retreats · from €650
LONG-READ ARTICLE · FOLLOWS THE SCROLL

Set the trigger to “Following the scroll” and each image opens exactly as far as the reader has scrolled — back up and it closes again. The photo also drifts inside its frame.

scroll scrubsoft inkdiamondin-frame parallax
Chapter 1 — Venice at dawn
Chapter 1 — Venice at dawn
Chapter 2 — Kyoto by lantern light
Chapter 2 — Kyoto by lantern light
GALLERY EXHIBITION · COLOR LENS

The photo is shown in black and white; wherever the mouse goes, a soft lens paints the true colors back in. On phones the lens wanders around by itself.

color lensfollows the mouseauto on touchhero text
Exhibition · Oct 3 – Nov 30

Colors of the mountains

Forty photographs of lakes, rock and forest. Move your mouse over the image.

Book tickets

The exhibition is a fictional example.

Tablet app
Tablet app
Color system
Color system
Workspace
Workspace
The team
The team
PRODUCT LAUNCH · HOVER TO PEEK

With the hover trigger, images stay hidden behind a colored cover until the mouse (or keyboard focus) lands on them — a playful teaser for a launch page. On phones they are shown straight away.

hover triggerbarskeyboard focusbadges
20 EFFECTS

Every effect on the same photo. Hover a card to play it again.

curtainscirclecornerdiamonddiagonalsplitirisslantinkshuttertilesblindsbarsblurflipfade
Curtain left
Curtain left
Curtain right
Curtain right
Curtain up
Curtain up
Curtain down
Curtain down
Circle
Circle
Corner circle
Corner circle
Diamond
Diamond
Diagonal
Diagonal
Split sideways
Split sideways
Split up & down
Split up & down
Iris box
Iris box
Slanted wipe
Slanted wipe
Soft ink
Soft ink
Color shutter
Color shutter
Pixel tiles
Pixel tiles
Blinds
Blinds
Bars
Bars
Blur → sharp
Blur → sharp
3D flip
3D flip
Fade up
Fade up
BUILT IN

Everything for portfolios, magazines and product pages.

effectstriggerslayoutscaptions
🎭
20 reveal effects
Curtains, circles, diamond, diagonal, splits, iris, slant, soft ink, color shutter, pixel tiles, blinds, bars, blur, 3D flip and fade.
🧭
4 triggers
When it scrolls into view, following the scroll, on hover, or when the page loads.
🧱
6 layouts
Grid, masonry, bento, hero banner with text, hover list with a floating preview, and a color lens.
🎞
Photo effects
Zoom-out settle, black & white to color, and photos that drift inside their frames.
🏷
5 caption styles
Below, on the image, slide up on hover, corner badge — plus numbers.
🖱
Hover effects
Zoom, lift, tilt towards the mouse, or dim the other images.
🎨
Your colors
Solid or gradient covers, any easing, duration and stagger.
♿
Accessible
Real <img> tags with alt text, keyboard focus reveals, reduced motion shows everything.

Magazines, agencies, prices and exhibitions on this page are fictional examples.

201 premium elements, Image Reveal included.