22 CSS Image Gallery Examples
Image galleries are one of the most common UI patterns and also one of the most fun to build creatively. These 22 examples range from simple hover effects to fully animated 3D galleries and interactive mouse-driven experiences.
The Complete Web Developer in 2026
40 hours of video
401+ lessons
10 projects
🎉 Code FRIENDS10 for 10% off
Expanding gallery view
A grid of black-and-white images that expand and transition to full color on hover. Built with pure CSS using Pug for templating.
Made with:
HTML
CSS
Dependencies:
Pug
View Code and Demo
Honeycomb image gallery
Images arranged in a hexagonal honeycomb grid. Each cell applies a color overlay on hover using only CSS. No JavaScript, no extra markup.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Hover glide image gallery
A cursor-driven gallery where moving the mouse over the grid reveals images with a gliding entrance animation. The images follow the pointer direction as they appear.
Made with:
HTML
CSS
JavaScript
Dependencies:
None
View Code and Demo
Clipping image gallery effect
A grid of images that clip and unclip using CSS clip-path transitions on hover, creating a geometric reveal effect for each photo.
Made with:
HTML
CSS
JavaScript
Dependencies:
None
View Code and Demo
3D Scrolling image gallery
A GSAP-powered gallery that rotates through images along a 3D carousel path. Each image smoothly curves in and out of view as you scroll.
Made with:
HTML
CSS
JavaScript
Dependencies:
GSAP
View Code and Demo
Image gallery animation
A pure CSS gallery where hovering over any image expands it to fill more space, pushing its neighbors aside without a single line of JavaScript.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Futuristic image gallery
A gallery with a dark sci-fi aesthetic, featuring glowing borders and animated transitions between images powered by JavaScript and Stylus.
Made with:
HTML
CSS
JavaScript
Dependencies:
Stylus
View Code and Demo
Gallery mouse effect
A fullscreen photo gallery driven by GSAP where the active image transitions based on mouse position, creating a fluid and immersive browsing experience.
Made with:
HTML
CSS
JavaScript
Dependencies:
GSAP
View Code and Demo
Circular dog gallery
Images arranged in a rotating circular layout. Clicking navigates between them with a smooth GSAP-powered rotation animation.
Made with:
HTML
CSS
JavaScript
Dependencies:
GSAP
View Code and Demo
Mouse move image gallery
Moving the mouse across the screen navigates through the gallery, no clicks needed. Images enter and exit based on cursor position and movement direction.
Made with:
HTML
CSS
JavaScript
Dependencies:
None
View Code and Demo
3D cube image gallery
Gallery images mapped onto the faces of a 3D CSS cube. Navigating between images rotates the cube on its axis with a perspective transform animation.
Made with:
HTML
CSS
JavaScript
Dependencies:
None
View Code and Demo
Expanding image gallery
A minimal horizontal gallery where clicking an image expands it with a smooth CSS transition, collapsing the others to make room.
Made with:
HTML
CSS
Dependencies:
Sass
View Code and Demo
Quad image gallery
A four-image grid where clicking a photo expands it and reveals a descriptive caption. Collapsing restores the original layout with a smooth jQuery animation.
Made with:
HTML
CSS
JavaScript
Dependencies:
JQuery
View Code and Demo
Expanding flex cards
A horizontal row of flex cards where each card expands on click to reveal the full image, with the remaining cards shrinking proportionally.
Made with:
HTML
CSS
JavaScript
Dependencies:
SCSS
JQuery
View Code and Demo
Gallery with wave transition
Images transition between each other with a rippling wave distortion effect, giving navigation a fluid, organic feel.
Made with:
HTML
CSS
JavaScript
Dependencies:
SCSS
JQuery
View Code and Demo
Travel gallery
A travel-themed expanding gallery that shows city information alongside each photo. Clicking a card grows it and displays location details with a staggered entrance.
Made with:
HTML
CSS
JavaScript
Dependencies:
Pug
SCSS
JQuery
View Code and Demo
Radial image gallery
Images arranged in a radial layout that transition from grayscale to full color on hover. Clicking an image triggers a rotation motion around the center point.
Made with:
HTML
CSS
Dependencies:
Pug
SCSS
View Code and Demo
Winter gallery
A winter-themed thumbnail grid where clicking a photo transitions it into a fullscreen view with a smooth CSS crossfade. Clean layout with no JavaScript dependencies.
Made with:
HTML
CSS
Dependencies:
SCSS
View Code and Demo
Simple gallery
A minimal gallery with a clean layout and a stylish sliding transition between images. Built with Pug and a small amount of JavaScript for navigation.
Made with:
HTML
CSS
JavaScript
Dependencies:
Pug
View Code and Demo
Season image gallery
A four-season themed gallery where each image has a unique hover reveal. The photo appears from beneath a color mask that lifts away on hover.
Made with:
HTML
CSS
Dependencies:
Pug
View Code and Demo
Image accordion gallery
An accordion-style gallery built with Swiper where hovering a panel expands it horizontally, while the others compress. Combines CSS transitions with jQuery for panel state management.
Made with:
HTML
CSS
JavaScript
Dependencies:
SCSS
Swiper
JQuery
View Code and Demo
Interactive hover image gallery
A grid gallery where hovering a thumbnail scales it up with a smooth opening animation, using CSS transitions and a minimal JavaScript interaction layer.
Made with:
HTML
CSS
JavaScript
Dependencies:
SCSS
View Code and Demo
Looking for more CSS inspiration? Browse our full collection of CSS examples.