Collection of hand-picked awesome CSS Gallery developed using CSS, html, JavaScript. Listed tutorials well played with 3d, gradients, Animation etc. some of the CSS Galleries are having beautiful animation effects using transitions. Demo and download available on each tutorial. CSS Gallery can be used directly without any changes and could be small changes based on your needs.
Article will be helpful for designers and non-coders.
1) Split screen gallery
Demo Image: A split screen gallery
A split screen gallery for telling a story or showing a slideshow. It’s buggy on iOS because of the way it deals with fixed positioned elements.
Author: Eduardo Bouças Created: MAY 20, 2015 Made with: HTML, CSS and JavaScript
2) Image Gallery Layout JSON and Infinite Scroll
Demo Image: Image Gallery Layout JSON and Infinite Scroll Scroll, hover and click! A simple, responsive and light image gallery layout concept.
Author: Tobias Bogliolo Created: June 25, 2017 Made with: HTML, CSS and JavaScript
3) Flex Panels Image Gallery
Demo Image: Flex Panels Image Gallery Flex panel image gallery with CSS animations.
Author: Joshua Ward Created: September 23, 2017 Made with: HTML, CSS and JavaScript
4) Bootstrap Image Gallery
Demo Image: Bootstrap Image Gallery Bootstrap Image Gallery
Author: Mosfiqur Rahman Created: October 04, 2015 Made with: HTML, CSS and JavaScript
5) Product Image Gallery with Thumbnails
Demo Image: Product Image Gallery with Thumbnails Requires jQuery
Author: Justine Created: March 18, 2017 Made with: HTML, CSS and JavaScript
6) Advanced Image Gallery
Demo Image: Advanced Image Gallery Swipe or click an image in the bottom row, or click one of the pagination bullets to navigate. Click the larger image to open the larger image gallery. In the larger image gallery: click an image to zoom in or out. Click the icons in the navigation bar to zoom, close or even go fullscreen.
Author: Derk Jan Speelman Created: November 01, 2016 Made with: HTML, CSS and JavaScript
7) Image Gallery Overlay with Pagination
Demo Image: Image Gallery Overlay with Pagination Open ‘inline’ content in a “lightbox” overlay, triggered by clicking an image within a image-gallery section. Unlike a usual “lightbox”, this overlay only covers up the gallery-content section. It was made with a customised “colorBox” jQuery lightbox plugin.
Author: Bram de Haan Created: February 05, 2013 Made with: HTML, CSS and JavaScript
8) Slick responsive gallery with any image dimensions and captions
Demo Image: Slick responsive gallery with any image dimensions and captions This is an image gallery built using the Slick carousel. It is fully responsive, has captions (based on alt attributes) and allows the use of images of any dimensions - you are not limited to images of a fixed size or aspect ratio. If the image is larger than the gallery, it will fill the available space in the viewer. Smaller images will be horizontally and vertically centered.
Author: Danny Connell Created: February 11, 2016 Made with: HTML, CSS and JavaScript
9) Responsive Carousel gallery
Demo Image: Responsive Carousel gallery carousel gallery (responsive)
Author: Jack Cohle Created: March 23, 2018 Made with: HTML, CSS and JavaScript
10) Image gallery with zoom
Demo Image: Image gallery with zoom Image gallery with zoom
Author: wunnle Created: February 03, 2017 Made with: HTML, CSS and JavaScript
11) Responsive inspiration gallery
Demo Image: Responsive inspiration gallery gallery with css grid & photoswipe + Clipping Logo
Author: crème Created: February 09, 2018 Made with: HTML, CSS and JavaScript
12) Simple jQuery gallery with border-image
Demo Image: Simple jQuery gallery with border-image A basic clickable gallery - click on a smaller image to see it in the large frame
Author: Anya Craig Created: May 02, 2016 Made with: HTML, CSS and JavaScript
13) Basic jQuery Gallery and Lightbox From Scratch
Demo Image: Basic jQuery Gallery and Lightbox From Scratch Basic jQuery Gallery + Lightbox From Scratch
Author: Nathan Created: April 13, 2018 Made with: HTML, CSS and JavaScript
14) Gallery video Slider
Demo Image: Gallery video Slider Gallery video Slider
Author: Anees Created: June 06, 2018 Made with: HTML, CSS and JavaScript
15) Glitch jQuery Gallery
Demo Image: Glitch jQuery Gallery A simple gallery with a bit of glitch when you open an image. Used mgGlitch.js
Author: Irene Created: October 31, 2016 Made with: HTML, CSS and JavaScript
16) Simple Jquery gallery
Demo Image: Simple Jquery gallery draggable image, rotatable image, resizing image, switch view column.
Author: canmeepo Created: June 17, 2016 Made with: HTML, CSS and JavaScript
17) jQuery deque implementation
Demo Image: jQuery deque implementation A jQuery deque implementation based on Steam’s product discovery list.
Author: Alex Kokozidis Created: September 14, 2016 Made with: HTML, CSS and JavaScript
18) Jquery gallery with category filter and lightbox
Demo Image: Jquery gallery with category filter and lightbox Jquery gallery with category filter & lightbox
Author: Anastasia Kas Created: August 26, 2017 Made with: HTML, CSS and JavaScript
19) Responsive and Touch-Friendly jQuery Gallery Lightbox Plugin
Demo Image: Responsive and Touch-Friendly jQuery Gallery Lightbox Plugin Responsive & Touch-Friendly jQuery Gallery Lightbox Plugin
Author: alidz Created: March 09, 2017 Made with: HTML, CSS and JavaScript
20) jQuery gallery lightbox with nav
Demo Image: jQuery gallery lightbox with nav jQuery lightbox gallery with navigation
Author: Oliver Taylor Created: May 01, 2016 Made with: HTML, CSS and JavaScript
21) CSS and jQuery Gallery Slideshow
Demo Image: CSS and jQuery Gallery Slideshow A plugin that can be implemented to get a dynamic and automatic slideshow, adjustable to any needed size. Images are shown automatically one after another, with the possibility to play/stop manually to observe images thoroughly.
Author: Gayane Created: August 31, 2018 Made with: HTML, CSS and JavaScript
22) Simple Gallery using jQuery
Demo Image: Simple Gallery using jQuery Simple Gallery using jQuery to change the ‘featured’ image on the left hand side to the one you have just selected on the right hand side.
Author: Mikey Created: May 27, 2016 Made with: HTML, CSS and JavaScript
23) Tiled Image Gallery
Demo Image: Tiled Image Gallery Responsive vertically tiled image gallery, comes with lightbox using jQuery and Bootstrap modal popup.
Author: Kehui Ho Created: July 13, 2017 Made with: HTML, CSS and JavaScript
24) Masonry Gallery
Demo Image: Masonry Gallery Demo for Masonry Gallery tutorial
Author: Alex Devero Created: October 26, 2015 Made with: HTML, CSS and JavaScript
25) Next generation of Photobox gallery
Demo Image: Next generation of Photobox gallery Photobox is the evolution, the next generation of gallery UI & UX code. It can do anything. It’s super flexible.
Author: Yair Even Or Created: March 15, 2014 Made with: HTML, CSS and JavaScript
26) Filter image gallery jquery
Demo Image: Filter image gallery jquery Filter image gallery on html data-tags
Author: Vybz Created: September 10, 2015 Made with: HTML, CSS and JavaScript
27) Flickity image gallery
Demo Image: Flickity image gallery Flickity - image gallery
Author: Dave DeSandro Created: February 06, 2015 Made with: HTML, CSS and JavaScript
28) Magnific Gallery
Demo Image: Magnific Gallery Nice responsive gallery. CSS columns, roll over, hover caption, Magnific Popup script, Zoom in effect, Haml & Sass & CoffeeScript
Author: Michal Niewitala Created: July 16, 2017 Made with: HTML, CSS and JavaScript
29) Responsive Image Gallery with jQuery Lightbox
Demo Image: Responsive Image Gallery with jQuery Lightbox A responsive image gallery with a simple lightbox created with Bootstrap and jQuery.
Author: Melinda Golden Created: September 22, 2017 Made with: HTML, CSS and JavaScript
30) Product Detail Gallery Component
Demo Image: Product Detail Gallery Component A lightweight image gallery perfect for e-commerce product details.
Author: Jon Yablonski Created: March 14, 2015 Made with: HTML, CSS and JavaScript
31) Balkan Style Portfolio Gallery
Demo Image: Balkan Style Portfolio Gallery Balkan Style - Portfolio Gallery
Author: Srdjan Pajdic Created: April 07, 2014 Made with: HTML, CSS and JavaScript
32) Responsive animated gallery
Demo Image: Responsive animated gallery Responsive animated gallery with CSS3 and jQuery
Author: Claudio Gomboli Created: August 29, 2012 Made with: HTML, CSS and JavaScript
33) Photo Gallery
Demo Image: Photo Gallery Photo gallery and Lightbox using jQuery. Click on photo and it will appear full scale in the Lightbox.
Author: Mark Glissmann Created: March 31, 2015 Made with: HTML, CSS and JavaScript
34) Lightbox gallery
Demo Image: Lightbox gallery Simple lightbox gallery Responsive too. classes are more semantic, replaced float with flexbox
Author: Konstantin M Created: September 21, 2014 Made with: HTML, CSS and JavaScript
35) Pure CSS Gallery with pagination
Demo Image: Pure CSS Gallery with pagination Pure CSS Gallery with pagination
Author: Jens Grochtdreis Created: February 26, 2014 Made with: HTML, CSS
36) 3D CSS Gallery
Demo Image: 3D CSS Gallery Shelves on a wall created with 3D CSS
Author: Peter Westendorp Created: February 06, 2013 Made with: HTML, CSS and JavaScript
37) 3D Cube Image Gallery
Demo Image: 3D Cube Image Gallery CSS transforms can be used to create a rotating 3D cube image gallery.
Author: George W. Park Created: MARCH 19, 2018 Made with: HTML, CSS and JavaScript
38) Honeycomb Gallery on CSS Grid
Demo Image: Honeycomb Gallery on CSS Grid Responsive layout on CSS Grid with media queries, and fallback. Thumbnails formed into hexagons with clip-path: polygon() — no effect in all IEs and Edge.
Author: Rafał Grzejszczyk Created: February 21, 2018 Made with: HTML, CSS and JavaScript
39) Photo Gallery Parallax Scroll Menu
Demo Image: Photo Gallery Parallax Scroll Menu Photo gallery scroll menu. On mobile performance, should stay smooth on a low-end Android device.
Author: Hakilebara Created: November 12, 2017 Made with: HTML, CSS and JavaScript
40) Photo Gallery built with simplicity
Demo Image: Photo Gallery built with simplicity A Photo Gallery built with simplicity.
Author: Christian Created: July 02, 2016 Made with: HTML, CSS and JavaScript
41) CSS-Only Image Gallery
Demo Image: CSS-Only Image Gallery Pure CSS funky gallery.
Author: Mustafa Enes Created: January 25, 2014 Made with: HTML, CSS
42) 3D cube image gallery
Demo Image: 3D cube image gallery An image gallery in form of a 3D cube. The demo uses CSS3 3D and animation properties to create a nice animated cube.
Author: Kushagra Gour Created: July 07, 2013 Made with: HTML, CSS
43) Pure CSS Polaroid Gallery
Demo Image: Pure CSS Polaroid Gallery Polaroid gallery in pure CSS. Meant to resemble a table top with polaroids scattered on it. The images will realign and scale when mouse hovers over to create a viewing mode.
Author: Alex Created: September 14, 2014 Made with: HTML, CSS
44) Image gallery with caption
Demo Image: Image gallery with caption A nice image gallery with animated caption drawn from the image data tags. Made with CSS3 for modern browsers. Less modern browsers or non-browser (like Internet Explorer) may encounter problems with showing the layout correctly.
Author: ander Created: July 13, 2013 Made with: HTML, CSS
45) Responsive Gallery with Lightbox
Demo Image: Responsive Gallery with Lightbox Responsive photo gallery with LightBox using Plain Javascript.
Author: King Jhessrael Bautista Created: March 21, 2018 Made with: HTML, CSS and JavaScript
46) Full featured lightbox gallery
Demo Image: Full featured lightbox gallery Full featured javascript lightbox gallery. No dependencies.
Author: Sachin choolur Created: August 01, 2016 Made with: HTML, CSS and JavaScript
47) Better Responsive Image Gallery With Flexbox
Demo Image: Better Responsive Image Gallery With Flexbox Crafting Better Responsive Image Galleries With Flexbox
Author: Dudley Storey Created: June 22, 2014 Made with: HTML, CSS
48) 3D images gallery
Demo Image: 3D images gallery Experiment using 3D transform property, animation properties and -webkit-filter.
Author: Bobby Created: November 03, 2012 Made with: HTML, CSS
49) Image Gallery with CSS Grid & Flexbox
Demo Image: Image Gallery with CSS Grid & Flexbox CSS Grid (with flexbox fallback) can be used to create a responsive image gallery with no media queries.
Author: George W. Park Created: March 05, 2018 Made with: HTML, CSS
50) CSS Grid Responsive Image Gallery
Demo Image: CSS Grid Responsive Image Gallery Playing around with CSS Grid in responsive image galleries.
Author: Stephanie Created: March 17, 2017 Made with: HTML, CSS
51) Responsive Magnific Gallery
Demo Image: Responsive Magnific Gallery Responsive gallery with: - CSS grid - PhotoSwipe - Lazysizes - Pug, Sass & CoffeeScript
Author: Michal Niewitala Created: May 07, 2018 Made with: HTML, CSS and JavaScript
52) React and CSS Grid Image Gallery
Demo Image: React and CSS Grid Image Gallery Smoking hot image gallery made with React, ES6, and some light CSS Grid experimentation
Author: Tobi Weinstock Created: June 18, 2017 Made with: HTML, CSS and JavaScript
53) 3D Carousel Gallery
Demo Image: 3D Carousel Gallery Using CSS 3D transforms, and just a bit of Javascript.
Author: Dudley Storey Created: July 06, 2013 Made with: HTML, CSS and JavaScript
54) Google Photos Material Gallery
Demo Image: Google Photos Material Gallery A vanilla javascript photo gallery plugin inspired by Google Photos.
Author: Ettrics Created: October 27, 2015 Made with: HTML, CSS and JavaScript
55) Gallery with mouse hove tooltip
Demo Image: Gallery with mouse hove tooltip Image gallery made with Flexbox and CSS Grid.
Author: Katherine Kato Created: May 10, 2018 Made with: HTML, CSS and JavaScript
56) CSS Image gallery
Demo Image: CSS Image gallery CSS Image gallery
Author: phng Created: February 02, 2017 Made with: HTML, CSS
57) Pure CSS Gallery hover effect
Demo Image: Pure CSS Gallery hover effect Pure CSS Gallery hover effect
Author: Nicolas Udy Created: December 24, 2015 Made with: HTML, CSS
58) Pure CSS gallery and Hover over thumbnails
Demo Image: Pure CSS gallery and Hover over thumbnails Some old websites I did and put them in this CSS gallery.
Author: Nigel Brewster Created: November 13, 2016 Made with: HTML, CSS
59) CSS Slide show gallery
Demo Image: CSS Slide show gallery slide show gallery made with css
Author: Lu Kanemon Created: August 14, 2015 Made with: HTML, CSS
60) Lightbox CSS Gallery
Demo Image: Lightbox CSS Gallery CSS Gallery (Lightbox)
Author: nebo Created: March 12, 2016 Made with: HTML, CSS
61) Pure Css gallery with accordion animation
Demo Image: Pure Css gallery with accordion animation Pure Css gallery with accordion animation
Author: Patrick McMurphy Created: May 30, 2014 Made with: HTML, CSS
62) CSS Gallery with thumbnail image
Demo Image: CSS Gallery with thumbnail image CSS Gallery with thumbnail image
Author: Rob G Created: February 15, 2014 Made with: HTML, CSS
63) Simple Html css Gallery
Demo Image: Simple Html css Gallery Image and description, latter only shown on hover.
Author: Jdias Created: September 03, 2013 Made with: HTML, CSS
64) CSS Gallery Hover Effect
Demo Image: CSS Gallery Hover Effect Responsive gallery with Hover Effect. Everything in pure CSS!
Author: Sasha Created: December 21, 2014 Made with: HTML, CSS
65) Pure CSS Gallery
Demo Image: Pure CSS Gallery Pure CSS Gallery
Author: MD Ashik Created: August 29, 2017 Made with: HTML, CSS
66) CSS Only gallery
Demo Image: CSS Only gallery Full css gallery
Author: Rémi Robichet Created: September 04, 2016 Made with: HTML, CSS
67) CSS Gallery with loader
Demo Image: CSS Gallery with loader Pure CSS Gallery powered by Animista.net animations
Author: Ana Travas Created: December 10, 2017 Made with: HTML, CSS and JavaScript
