29 CSS Gallery
Collection of HTML and CSS image gallery code examples: simple, responsive, lightbox, etc. Update of September 2017 collection. 4 new examples.
![Demo image: Overlap Gallery]( "Overlap Gallery")
Author
- Keith Wyland
Made with
- HTML / CSS (SCSS) / JavaScript
About the code
Overlap Gallery
CSS grid mini overlap gallery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: Normalize.css, Prefixfree.js, jQuery
Author
- Katherine Kato
About the code
CSS Gallery
Image gallery made with flexbox and CSS grid.
About the code
Tumblr Photogrid/Photoset
Tumblr photogrid/photoset with flex-box in place of JavaScript.
About the code
Responsive Pure CSS Image Gallery with CSS Grid
Here's one of an image gallery where you select the img you want to be showcased in the center. The layout is made possible with CSS grid. When switching to a smaller viewport you'll get a different experience that is made possible by altering the grid-template-columns and grid-template-rows.
Author
- Michal Niewitala
- 15.09.2017
Made with
- HTML/Haml
- CSS/Sass
- JavaScript/CoffeeScript (jquery.js, magnific-popup.js)
About the code
Magnific Gallery
Nice responsive gallery with: CSS columns, roll over, hover caption, magnific popup script, zoom in effect.
Made with
- HTML
- CSS
- JavaScript (jquery.js)
About the code
Gmail Image Gallery Animation
Image gallery animation with HTML, CSS and JS.
About the code
Scrolling & Looping Gallery
Scrolling & looping gallery. Vanilla HTML/CSS/JS. No Touch Events.
Made with
- HTML
- CSS
- JavaScript (jquery.js)
About the code
Photo Gallery
See the gallery by clicking on the windows.
About the code
Amur Leopard Image Gallery With CSS Vars
Click the info button in the bottom right corner. 😼 WebKit-only because other browsers have poor support for using calc() in place of anything else other than length values.
Demo Image: Portfolio Gallery
Portfolio Gallery
HTML, CSS and JavaScript portfolio gallery.
Made by Tanmoy Biswas
February 14, 2017
Demo Image: HTML And CSS Image Gallery
HTML And CSS Image Gallery
Image gallery with zoom.
Made by wunnle
February 3, 2017
Demo Image: CSS 3D Transform Gallery
CSS 3D Transform Gallery
Cube rotate 3D transform gallery.
Made by Lorina Gousi
January 30, 2017
Author
- Arthur Camara
Made with
- HTML/Pug
- CSS/Stylus
- JavaScript/Babel
About the code
Gallery Hover Effect
Gallery hover effect and gallery expanded.
Demo Image: Photobox
Photobox
Photobox is the evolution, the next generation of gallery UI & UX code.
Made by Yair Even Or
January 4, 2017
Demo Image: Travel Gallery
Travel Gallery
Travel gallery with flexbox and CSS animations/transitions.
Made by Sean Free
January 2, 2017
Demo Image: Slide-out Scrolling Gallery
Slide-out Scrolling Gallery
A gallery that reveals three panels as the user scrolls.
Made by Teegan Lincoln
January 1, 2017
Demo Image: Reflective Photo Gallery Wall
Reflective Photo Gallery Wall
HTML, CSS and JavaScript reflective photo gallery wall experiment.
Made by Shawn Reisner
October 21, 2016
Demo Image: Quad Image Gallery
Quad Image Gallery
Transitioned gallery for four images.
Made by Dudley Storey
October 14, 2016
Demo Image: Gallery With Wave Transition Effect
Gallery With Wave Transition Effect
It has 24 1920x1080 pictures inside, so it can take a sec to download. It looks cool though. Feel free to play around with variables (transition times, and delays). You can change the number of pictures. Just change the variables in scss and js. Also, if you want to add new pics, just add the url of the pic in the js array.
Made by Kirill Kiyutin
September 9, 2016
Demo Image: Portfolio Gallery
Portfolio Gallery
Portfolio gallery with HTML, CSS and JavaScript.
Made by Srdjan Pajdic
June 2, 2016
Made with
- HTML
- CSS (folio.css)
- JavaScript (folio.js)
About the code
Folio.Transitions
Out of the box page & section transitions with Foliodot.
Demo Image: Google Photos Material Gallery
Google Photos Material Gallery
A vanilla javascript photo gallery plugin inspired by Google Photos.
Made by Ettrics
January 24, 2016
Demo Image: Rollover CSS Blur Filter Image Gallery
Rollover CSS Blur Filter Image Gallery
Utilizing CSS transitions & transforms and the CSS blur filter.
Made by sjmcpherson
January 18, 2016
Demo Image: Photo Gallery
Photo Gallery
HTML, CSS and JavaScript photo gallery.
Made by charlie hield
October 29, 2015
Demo Image: Flip Image Gallery With Content
Flip Image Gallery With Content
A flip animation image with some hidden preview.
Made by Aleh Isakau
October 11, 2015
Demo Image: Accessible Off-Canvas Grid Gallery
Accessible Off-Canvas Grid Gallery
Accessible grid style gallery with off-canvas image details prototype with focus management and keyboard support.
Made by Joe Watkins
June 13, 2015
Demo Image: Split Screen Gallery
Split Screen Gallery
A split screen gallery for telling a story or showing a slideshow.
Made by Eduardo Bouças
May 20, 2015
Demo Image: Vertical Gallery
Vertical Gallery
Just a full width vertical gallery. Content with a toggle description.
Made by Elizabet Oliveira
October 12, 2014
Demo Image: 3D Tilted Scrolling Image Gallery
3D Tilted Scrolling Image Gallery
Here’s a nice 3D tilted scrolling image gallery implemented using Pete Rojwongsuriya’s jquery.tilted-pagescroll plug-in.
Made by Sebastian Schepis
June 19, 2014