This collection combines the power of CSS Grid and the interactivity of Scroll Snap to create versatile image galleries. The aspect-ratio property combined with object-fit: cover ensures layout stability and perfect cropping, while grid-auto-flow: dense allows mimicking Masonry grids without JavaScript. Native scroll physics is used for horizontal strips, and lightbox functionality is implemented via the :target pseudo-class, eliminating script dependencies. These solutions deliver high performance, responsiveness, and a cinematic user experience.
111 CSS Galleries
Wavy Image Gallery
Images appear as jigsaw puzzle pieces with interlocking edges that can visually fit together.
See the Pen Wavy Image Gallery.
Animated Grid Tracks with :has()
A pure CSS expanding gallery powered by the modern :has() selector. Hovering triggers a grid-template-columns transition, widening the active item while revealing content via opacity and transform animations, all styled with blend modes for a tinted monochrome aesthetic.
See the Pen Animated Grid Tracks with :has().
Responsive CSS Grid: Books
A unique, dynamic, and responsive collage of images that uses advanced CSS techniques to create a 3D-like geometric pattern.
See the Pen Responsive CSS Grid: Books.
Full Viewport Gallery: Pure CSS
A pure CSS image gallery that leverages the advanced :has() pseudo-class and radio input hacks to orchestrate state changes without JavaScript. The layout utilizes CSS Grid variables to dynamically translate the viewport, creating a smooth, easing-based transition between full-screen images controlled entirely by sibling combinators and checked states.
See the Pen Full Viewport Gallery: Pure CSS.
Pure HTML/CSS Image Slideshow
A lightweight, fast gallery that operates without JS libraries, supporting keyboard navigation, mobile swipes, and deep linking to specific slides.
See the Pen Pure HTML/CSS Image Slideshow.
Smooth Scroll Image Gallery with Anchor Links
This component leverages the native browser feature scroll-behavior: smooth to create a fluid scrolling animation between sections. This is triggered by anchor links, providing a simple and performant way to build a slideshow without any complex JavaScript animation libraries.
See the Pen Smooth Scroll Image Gallery with Anchor Links.
Scroll-Driven Gallery
A demonstration of the new CSS Scroll-Driven Animations (SDA) API, where the scroll position of the entire page directly drives a complex, scaling, and rotating grid of images, achieving a high-performance, engaging visual effect purely with CSS.
See the Pen Scroll-Driven Gallery.
Photo Gallery Grid Animation with CSS Clip-Path
A showcase of the creative application of clip-path to create an “unfolding” image effect on hover, where the interaction not only changes the shape but also uses z-index to elevate the element and overlap neighboring tiles.
See the Pen Photo Gallery Grid Animation with CSS Clip-Path.
3D Parallax Navigation with 'Fisheye' Hover Effect (CSS-Only)
A stunning CSS-only 3D parallax navigation with a “fisheye” hover effect, achieved using transform-style: preserve-3d and a translateZ function tied to cursor position. The core mechanism is the mathematical calculation of CSS variables.
Reflection with Progressive Blur in CSS
Progressive Blur for the lower screen half is implemented to simulate fog: the effect is created by layering multiple elements with varying backdrop-filter: blur() values, precisely masked using mask: linear-gradient().
See the Pen Reflection with Progressive Blur in CSS.
Corner-shape Hexagon Avatars
This demo creates a responsive hexagonal grid using CSS Grid and the powerful, lesser-known corner-shape: bevel property. It uses negative margin-block for smooth overlaps, and a unique linear() easing function for a bouncy, fluid hover animation.
See the Pen Corner-shape Hexagon Avatars.
Coverflow 3D Effect with CSS
A truly modern image flow powered by CSS Scroll-driven Animations and view-timeline. This demo uses pure CSS to create a 3D perspective effect where images pop out and rotate as they enter the viewport, with no JavaScript required.
See the Pen Coverflow 3D Effect with CSS.
Vertical Slider with CSS Only
A simple, yet effective image gallery using CSS Grid and native browser features like scroll-snap and :target. This approach creates a smooth, fully accessible slideshow without any JavaScript, relying on pure CSS for both layout and navigation.
See the Pen Vertical Slider with CSS Only.
Slide In/Out Gallery Effect
An atmospheric, cyberpunk gallery where static images feel alive due to constantly shifting digital artifacts and smooth caption reveals on hover.
CSS Grid for Multi-Sized Avatars
A responsive mosaic grid of user avatars utilizing CSS Grid’s dense auto-flow algorithm to seamlessly pack items of varying sizes. Special ‘gold’ supporters span multiple rows and columns, creating visual hierarchy, while :has() pseudo-class selectors enable a focused hover state that subtly dims non-active elements.
See the Pen CSS Grid for Multi-Sized Avatars.
CSS Thumbnail Transition Effects
A fluid, responsive gallery that automatically adjusts to screen size and provides rich visual feedback on hover.
