GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

CSS Image Gallery Animation 9 One Line, Copy-Paste

· Godrich · 9 items · 21 min read

FeedbackSCSSCSS onlyHoverLanding page

A css image gallery animation turns a photo that just pops onto the page into one that reveals itself — a cover sliding off, a circle opening like a lens.

Left-to-right wipe01 image-reveal-gallery-wipe-left-right Curtain split reveal02 image-reveal-gallery-curtain-split Circle mask grow03 image-reveal-gallery-circle-mask-grow Masonry stagger fade04 image-reveal-gallery-masonry-fade-stagger Native <dialog> lightbox05 image-reveal-gallery-lightbox-dialog Hover caption grid06 image-reveal-gallery-hover-caption-grid Thumbnail to lightbox morph07 image-reveal-gallery-view-transition-lightbox Scroll mask reveal08 image-reveal-gallery-scroll-reveal-mask Filter tabs via :has()09 image-reveal-gallery-filter-tabs-has

Auto-plays · click a tile to jump to its section · all nine in one zip

These nine are ordered the way a visitor actually moves through a photo gallery rather than by how flashy they look. First come the three single-photo reveals that fire on hover before anyone's clicked anything (01–03), then a grid of several photos arriving together (04) and two ways of enlarging one on click (05, 07), then a caption that only shows up on the tile you're pointing at (06) and a big hero photo that reveals itself as you scroll to it (08), and last, the moment a visitor starts picking a category out of many photos rather than reacting to just one (09). When the values sliding into view are prices, the CSS pricing table animations handle those numbers, and doing the same over a translucent panel is what the glassmorphism effects supply.

01Left-to-right wipe

Where this shows up

Hover the photo and a cream-colored panel covering it shrinks down to nothing, anchored at its right edge so the strip left uncovered grows from left to right rather than from the center.

Left-to-right wipe
Open in a new tab

01 · Left-to-right wipe — Measured area 29.128% · moving frames 18/23Original by GODRICH · SCSS and React ship in the zip · See the password

scaleXtransform-origin500ms

How it is built

Of the nine measured for this post, this cover-panel wipe came back with the strongest motion by a wide margin — a flat panel sliding clear of a photo reads as more intense than most of the softer reveals further down this list.

.wr-cover {
  position: absolute;
  inset: 0;
  background: $subject-cream;
  transform-origin: 100% 50%;
  transform: scaleX(1);
  transition: transform 600ms $ease-out;
}
.wr-focal:hover .wr-cover {
  transform: scaleX(0);
}

02Curtain split reveal

What happens on screen

Two panels split the photo exactly down the middle, and hovering sends the left one sliding left and the right one sliding right until both clear the frame, like a stage curtain being pulled open.

Curtain split reveal
Open in a new tab

02 · Curtain split reveal — Measured area 29.122% · moving frames 18/23Original by GODRICH · SCSS and React ship in the zip · See the password

translateX50vw600ms

How it works

It's one of the only reveals on this list where two separate elements animate at the same time instead of one — call document.getAnimations() on it mid-hover and it hands back two running animations, where most other items here return just one.

.cs-panel {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  background: $subject-ink;
  transition: transform 600ms $ease-spring;
}
.cs-panel--l { left: 0; }
.cs-panel--r { left: 50%; }
.cs-focal:hover .cs-panel--l { transform: translateX(-100%); }
.cs-focal:hover .cs-panel--r { transform: translateX(100%); }

03Circle mask grow

What it looks like

A circle starts as a single point at the exact center of the photo and grows outward on hover until its radius covers 75% of the frame, the same motion as a camera aperture letting light in.

Circle mask grow
Open in a new tab

03 · Circle mask grow — Measured area 29.122% · moving frames 17/23Original by GODRICH · SCSS and React ship in the zip · See the password

clip-pathcircle()550ms

How to wire it up

How strong this particular reveal measures depends almost entirely on the color sitting behind the photo before the circle reaches it — keep that backdrop close to the photo's own tones and the growing edge nearly disappears.

.cm-photo {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 600ms $ease-out;
}
.cm-focal:hover .cm-photo {
  clip-path: circle(75% at 50% 50%);
}

04Masonry stagger fade

Where a css image gallery grid needs this

Five uneven-height tiles stack into a two-column brick pattern, and a real IntersectionObserver watches each tile on its own, adding an .in class the moment that specific tile is about 30% into view.

Masonry stagger fade
Open in a new tab

04 · Masonry stagger fade — Measured area 25.641% · moving frames 12/23Original by GODRICH · SCSS and React ship in the zip · See the password

columnstransition-delayJS 7줄

The core of it

Only a transition-delay tells the tiles apart — 0ms, then 140ms more for each one after it — so what reads as one grid animating together is actually five separate tiles running the identical opacity-and-translateY transition, just started a beat apart from each other.

var tiles = document.querySelectorAll('.mf-tile');
var io = new IntersectionObserver(function (entries) {
  entries.forEach(function (e) {
    if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); }
  });
}, { threshold: 0.3 });
tiles.forEach(function (t) { io.observe(t); });

05Native dialog lightbox

What you see

Clicking the thumbnail opens a native <dialog> element with showModal() instead of a hand-built overlay div, which means the browser already handles trapping focus inside it and closing on Escape without any extra code.

Native <dialog> lightbox
Open in a new tab

05 · Native <dialog> lightbox — Measured area 70.732% · moving frames 8/23Original by GODRICH · SCSS and React ship in the zip · See the password

dialogshowModalJS 6줄

The idea behind it

The close button explicitly grabs focus with preventScroll: true the instant the dialog opens, so bringing up the lightbox never yanks the page's scroll position along with it.

var dlg = document.querySelector('.lb-dialog');
var btn = document.querySelector('.lb-close');
thumb.addEventListener('click', function () {
  dlg.showModal();
  btn.focus({ preventScroll: true });
});
btn.addEventListener('click', function () { dlg.close(); });

06Hover caption grid

Where it fits

Three tiles sit side by side, and only the one under the cursor gets its caption bar rising up from the bottom edge with translateY while its opacity fades in — the other two hold perfectly still.

Hover caption grid
Open in a new tab

06 · Hover caption grid — Measured area 4.412% · moving frames 11/23Original by GODRICH · SCSS and React ship in the zip · See the password

translateYopacity300ms

Why it is done this way

That caption bar covers only a sliver of each tile rather than the whole photo, making this the smallest area reveal on the list by far, which the swing between fully hidden and fully shown makes up for in sharpness.

.hc-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 300ms $ease-out, opacity 300ms $ease-out;
}
.hc-tile:hover .hc-cap {
  transform: translateY(0);
  opacity: 1;
}

07Thumbnail to lightbox morph

What moves

A click measures the thumbnail's exact position and size with getBoundingClientRect(), sets that as the overlay panel's starting transform, then clears the transform on the very next frame so the browser animates the panel growing from the thumbnail's spot out to its full centered size — the FLIP technique, short for First, Last, Invert, Play.

Thumbnail to lightbox morph
Open in a new tab

07 · Thumbnail to lightbox morph — Measured area 21.074% · moving frames 16/23Original by GODRICH · SCSS and React ship in the zip · See the password

getBoundingClientRectFLIPJS 9줄

Worth noting

Despite the item's name, nothing here calls document.startViewTransition(); browser support for that API is still uneven enough that the whole effect runs on plain transform instead, which every browser has agreed on for years.

thumb.addEventListener('click', function () {
  var t = thumb.getBoundingClientRect();
  var p = panel.getBoundingClientRect();
  panel.style.transform =
    'translate(' + (t.left - p.left) + 'px,' + (t.top - p.top) + 'px) ' +
    'scale(' + (t.width / p.width) + ',' + (t.height / p.height) + ')';
  panel.classList.add('is-open');
  requestAnimationFrame(function () {
    panel.style.transform = 'translate(0,0) scale(1,1)';
  });
});

08Scroll mask reveal

The moment it fires

The instant the photo is about 30% into the viewport, an IntersectionObserver adds an .in class that slides mask-position from 0 0 to 100% 0, sweeping a soft gradient edge across the image rather than cutting it with a hard line.

Scroll mask reveal
Open in a new tab

08 · Scroll mask reveal — Measured area 29.122% · moving frames 16/23Original by GODRICH · SCSS and React ship in the zip · See the password

mask-imagemask-positionJS 7줄

The key property

Because the mask image here is sized at 260% — larger than the photo itself — that 100% position is the one where the mask's opaque region ends up covering the frame, not the transparent one, which runs backwards from what the number alone suggests.

.mk-photo {
  mask-image: linear-gradient(100deg, transparent 0 38%, #000 58% 100%);
  mask-size: 260% 100%;
  mask-position: 0 0;
  transition: mask-position 700ms $ease-out;
}
.mk-frame.in .mk-photo {
  mask-position: 100% 0;
}

09Filter tabs via :has()

What the user notices

Three hidden radio inputs and a :has() selector on a shared ancestor are the entire mechanism — pick a tab and every tile whose data-cat doesn't match fades to 15% opacity and shrinks slightly, with no JavaScript running the filtering logic itself.

Filter tabs via :has()
Open in a new tab

09 · Filter tabs via :has() — Measured area 24.351% · moving frames 13/23Original by GODRICH · SCSS and React ship in the zip · See the password

:has()translateXJS 8줄

What to read in the code

The sliding indicator under the tab labels never drifts out of alignment with the tab it's pointing at because each tab is locked to a fixed 64px width, so its translateX only ever has to move in exact multiples of that one number.

.ft-frame:has(#ft-2:checked) .ft-tile:not([data-cat="photo"]) {
  opacity: .15;
  transform: scale(.94);
  pointer-events: none;
}
.ft-indicator {
  width: 64px;
  transition: transform 300ms $ease-pop;
}
#ft-2:checked ~ .ft-tabs .ft-indicator { transform: translateX(64px); }
#ft-3:checked ~ .ft-tabs .ft-indicator { transform: translateX(128px); }

Where does a css image gallery animation actually break?

What goes wrong

Item 08, the trickiest of these css image transitions to get right, shipped backwards the first time it was built. The natural guess when reading mask-position: 100% 0 next to mask-position: 0 0 is that a bigger number must mean more of the mask is pushed out of frame, so the first draft set the resting state to 100% and the revealed state to 0% — and it looked wrong the moment the captured frames were opened side by side, showing the photo fully hidden right when it was supposed to be fully shown. The cause is that mask-position computes its percentage the same way background-position does, sliding across the gap between the mask image's own size and the element's size; this mask is set to mask-size: 260%, so that gap is negative, and a negative gap flips which direction the percentage moves in — 100% lands the mask's opaque band over the photo instead of its transparent one, so the higher number is the one that reveals more, not less. Swapping the base and .in values the other way around fixed it, and the fix only became obvious once real rendered frames were compared rather than reasoned about from the property names alone.

How to avoid it

Deciding when a photograph behind type hurts the letters comes back as a legibility question in the kinetic typography landing, where the type itself moves.

Item 04 carries a smaller version of the same "measure it, don't assume it" lesson: its tallest tile was tuned to fit a 480×300 desktop frame, then overflowed once the same grid ran at a 320px phone width, since the grid's own width shrinks on small screens but a tile's fixed pixel height never does. The zip below needs a password to open it, and rather than sitting in a box it's written into this paragraph as an ordinary word: 63vswp74. Copy it exactly as it appears in this sentence and the download unlocks.

Variants worth trying

Variant Changed value Feel
Snappier wipe Item 01's transition duration cut from 600ms to 300ms The cover panel clears almost instantly instead of sweeping visibly across the frame
Full-bleed aperture Item 03's clip-path radius raised from circle(75%) to circle(100%) The growing circle reaches every corner instead of leaving a rounded vignette at full size
Cinematic mask sweep Item 08's mask-position transition stretched from 700ms to 2s The soft edge drifts slowly enough to suit a large hero photo instead of a quick thumbnail

Accessibility for these nine image reveals

What reduced motion leaves

Every one of the nine switches its motion off under a reduced-motion setting, but which state they land on differs by item. For six of them — the wipe, the curtain, the circle mask, the masonry grid, the FLIP lightbox, and the scroll mask — the resting state alone already shows the whole photo, so removing the animation loses nothing: the cover panel simply starts already gone, the circle already at full radius, every masonry tile already faded in. Item 06 actually changes behavior rather than just skipping motion — its caption bar is forced to stay visible all the time instead of appearing only on hover, since a caption that can only be read by resting a cursor somewhere would otherwise become unreachable once the reveal transition is gone. Item 09's filter keeps working exactly as before under reduced motion; only the transition on the indicator and the dimmed tiles is removed, so picking a tab still narrows the gallery instantly, it just no longer slides or fades on the way there.

Related reading

Item 06's hover-only trigger pairs well with the broader set of ways a photo can react to a cursor covered in CSS Image Hover Effects, and item 05's native <dialog> element gets a closer look alongside other overlay patterns in CSS Modal Animations. The mask-position property behind item 08 and the :has() selector behind item 09 are both documented on MDN, for mask-image and :has(), if you need to check browser support before shipping either one.

FAQ

Do these css image animation effects need JavaScript, or is it all pure CSS?

Four of the nine run on real JavaScript: item 04's masonry grid and item 08's scroll mask both use a 7-line IntersectionObserver, item 05's lightbox uses 6 lines to call showModal() and manage focus, and item 07's morph uses about 9 lines to measure and animate the FLIP transform. The other five — including item 09's filter tabs — run entirely on :hover, :checked, and :has(), with zero JavaScript.

Which of these still work on a phone with no mouse to hover?

Items 05, 07, and 09 are triggered by a tap rather than a hover, so they behave the same on a touchscreen as they do with a mouse. Items 01, 02, 03, and 06 only fire on :hover, which most touch browsers just never trigger — the photo underneath is still there, but the reveal itself, or item 06's caption, won't show up without a pointer resting on the tile.

Is the React version in the zip built any differently from the plain CSS one?

What's on screen matches exactly. The vanilla files keep both the real interactive path and a separate is-demo loop used only to capture the preview GIFs, while the nine React components drop that capture loop entirely and wire the same :hover states, the same IntersectionObserver calls, and the same click handlers straight into component props. For the whole gallery — sorting, zoom, a lightbox — the CSS image gallery grid effects are the expanded set.

Enter the archive password

The password is inside this article. You will find it as you read.