DIAMOND SHAPE GRID

See the Pen diamond shape grid by Tanisha J. (@techyt) on CodePen.light

Author

  • Tanisha J.

Made with

  • HTML / CSS

PHOTO GALLERY

A masonry style photo gallery.

See the Pen Photo Gallery by Russ Perry (@rperry1886) on CodePen.light

Author

  • Russ Perry

Made with

  • HTML / CSS (SCSS)

HIVE PHOTO GALLERY GRID

See the Pen Hive Photo Gallery Grid by Ana Tudor (@thebabydino) on CodePen.light

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

GRITTY GRID GALLERY

A fast idea to use CSS Grid to display an image gallery. Hover/click to expand.

See the Pen Gritty Grid Gallery by iGadget (@iGadget) on CodePen.light

Author

  • iGadget

Made with

  • HTML / CSS (SCSS)

WINTER GALLERY

See the Pen Winter gallery by Ludmila Tretyakova (@ludmila-tretyakova) on CodePen.light

Author

  • Ludmila Tretyakova

Made with

  • HTML / CSS (SCSS)

RHOMB GALLERY ON GRIDS

See the Pen Rhomb gallery on grids + clip-path by yoksel (@yoksel) on CodePen.light

Author

  • yoksel

Made with

  • HTML / CSS (SCSS)

FASHION ISOMETRIC GALLERY

Experiment for testing isometric ecommerce layout concept.

See the Pen Fashion Isometric Layout by Malaika Ishtiaq (@MalaikaIshtiaq) on CodePen.light

Author

  • Malaika Ishtiaq

Made with

  • HTML / CSS (SCSS)

DROP SPREAD BLUR

Only CSS gallery with drop spread blur effect.

See the Pen Drop Spread Blur by ycw (@ycw) on CodePen.light

Author

  • ycw

Made with

  • HTML (Pug) / CSS (Less)

GALLERY

Gallery with hover effect.

See the Pen image hover effect — week 10/52 by Mert Cukuren (@knyttneve) on CodePen.light

Author

  • Mert Cukuren

Made with

  • HTML / CSS (SCSS)

HEXAGON GALLERY

CSS only hexagon gallery.

See the Pen Hexagon Gallery by Gabriela Johnson (@gabrielajohnson) on CodePen.light

Author

  • Gabriela Johnson

Made with

  • HTML / CSS

ACCORDION GALLERY ZOOM ANIMATION

See the Pen accordion gallery zoom animation (css, responsive) by Daniel Subat (@bbx) on CodePen.light

Author

  • Daniel Subat

Made with

  • HTML / CSS (SCSS)

MASONRY GALLERY

Responsive CSS Grid masonry gallery.

See the Pen Responsive CSS Grid Masonry Gallery by vhanla (@vhanla) on CodePen.light

Author

  • vhanla

Made with

  • HTML / CSS / JavaScript

PURE CSS RESPONSIVE GALLERY

Tired of writing JavaScript? Have you written your fair share of jQuery onclick events? Despair not! For you can make a responsive gallery in just HTML and CSS. All you need are some labels and some exotic CSS. Have fun!

See the Pen Pure CSS responsive gallery by Pieter Biesemans (@pieter-biesemans) on CodePen.light

Author

  • Pieter Biesemans

Made with

  • HTML (Pug) / CSS (SCSS)

GALLERY

Masonry gallery with scroll effect.

See the Pen Guided by ycw (@ycw) on CodePen.light

Author

  • ycw

Made with

  • HTML (Pug) / CSS (Less) / JavaScript

RESPONSIVE PHOTO GALLERY GRID WITH LIGHTBOX – NO SCRIPT

Responsive photo gallery updated with lightbox effects. Utilize CSS Grid & Flexbox and no script. Using target property.

See the Pen Responsive Photo Gallery Grid with Lightbox and – No Script by Majed (@alchatti) on CodePen.light

Author

  • Majed

Made with

  • HTML (Pug) / CSS (SCSS)

SIMPLICITY

Simple gallery in HTML, CSS and JS.

See the Pen Simplicity by ycw (@ycw) on CodePen.light

Author

  • ycw

Made with

  • HTML (Pug) / CSS / JavaScript

PRODUCT GALLERY

A minimal single product page built with CSS Flexbox and vanilla JavaScript.

See the Pen Product by Katherine Kato (@kathykato) on CodePen.light

Author

  • Katherine Kato

Made with

  • HTML / CSS (SCSS) / JavaScript

HORIZONTAL SLIDER TO GALLERY GRID

Full responsive grid with awesome mobile UX using one media query and two lines of code.

See the Pen Horizontal slider to gallery grid by lucas lemonnier (@luclemo) on CodePen.light

Author

  • lucas lemonnier

Made with

  • HTML / CSS (SCSS)

SEASONS GALLERY

Pure CSS image gallery.

See the Pen Seasons by ycw (@ycw) on CodePen.light

Author

  • ycw

Made with

  • HTML (Pug) / CSS

POP-UP/OVERLAY GALLERY

This is a popup overlay design for your portfolio! Display your projects/work in detail with a click of a button.

See the Pen Daily UI #016 | Pop-up/Overlay by Julie Park (@juliepark) on CodePen.light

Author

  • Julie Park

Made with

  • HTML / CSS (SCSS) / JavaScript

IMAGE GALLERY

Parallax image gallery using figure & figcaption.

See the Pen Parallax image gallery using Figure & Figcaption – #CodePenChallenge by Booligoosh (@Booligoosh) on CodePen.light

Author

  • Booligoosh

Made with

  • HTML / CSS / JavaScript

CSS GALLERY

Image gallery made with flexbox and CSS grid.

See the Pen Gallery by Katherine Kato (@kathykato) on CodePen.light

Author

  • Katherine Kato

Made with

  • HTML
  • CSS/SCSS
  • JavaScript

TUMBLR PHOTOGRID/PHOTOSET

Tumblr photogrid/photoset with flex-box in place of JavaScript.

See the Pen Tumblr photogrid/photoset with flex-box in place of JavaScript by Zed Dash (@z-) on CodePen.light

Author

  • Zed Dash

Made with

  • HTML
  • CSS/SCSS

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.

See the Pen Responsive pure CSS image gallery with CSS Grid ✨ by Jhey (@jh3y) on CodePen.light

Author

  • Jhey

Made with

  • HTML/Pug
  • CSS/Stylus

MAGNIFIC GALLERY

Nice responsive gallery with: CSS columns, roll over, hover caption, magnific popup script, zoom in effect.

See the Pen Magnific Gallery by Michal Niewitala 🍋 (@mican) on CodePen.light

Author

  • Michal Niewitala
  • 15.09.2017

Made with

  • HTML/Haml
  • CSS/Sass
  • JavaScript/CoffeeScript (jquery.js, magnific-popup.js)

GMAIL IMAGE GALLERY ANIMATION

Image gallery animation with HTML, CSS and JS.

See the Pen Gmail Image Gallery Animation – Transformation 5 CSSthat by Vandan27 (@Vandan27) on CodePen.light

Author

  • Vandan27
  • 01.08.2017

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

SCROLLING & LOOPING GALLERY

Scrolling & looping gallery. Vanilla HTML/CSS/JS. No Touch Events.

See the Pen Scrolling & Looping Gallery – Vanilla HTML/CSS/JS – ES5 – No Touch Events by Phil Flanagan (@phileflanagan) on CodePen.light

Author

  • Phil Flanagan
  • 16.07.2017

Made with

  • HTML
  • CSS
  • JavaScript

PHOTO GALLERY

See the gallery by clicking on the windows.

See the Pen Photo Gallery by Tomasz Sporys (@Tomasz-S) on CodePen.light

Author

  • Tomasz Sporys
  • 26.06.2017

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

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.

See the Pen Amur leopard image gallery with CSS vars (responsive, WebKit only) by Ana Tudor (@thebabydino) on CodePen.light

Author

  • Ana Tudor
  • 22.05.2017

Made with

  • HTML/Pug
  • CSS/SCSS

Portfolio Gallery

HTML, CSS and JavaScript portfolio gallery.

See the Pen Protfolio Gallery by Tanmoy Biswas (@bravotanmoy) on CodePen.light

Author

  • Tanmoy Biswas

Made with

  • Html / CSS / Javascript
Demo and Download

HTML And CSS Image Gallery

Image gallery with zoom.

See the Pen Image gallery with zoom by wunnle (@wunnle) on CodePen.light

Author

  • wunnle

Made with

  • Html / CSS
Demo and Download

CSS 3D Transform Gallery

Cube rotate 3D transform gallery.

See the Pen 3D TRANSFORM GALLERY – cube rotate by Lorina Gousi (@loriprift) on CodePen.light

Author

  • Lorina Gousi

Made with

  • Html / CSS
Demo and Download

GALLERY HOVER EFFECT

Gallery hover effect and gallery expanded.

See the Pen Gallery hover effect + Gallery expanded by Arthur Camara (@arthurcamara1) on CodePen.light

Author

  • Arthur Camara

Made with

  • HTML/Pug
  • CSS/Stylus
  • JavaScript/Babel

Photobox

Photobox is the evolution, the next generation of gallery UI & UX code.

See the Pen Photobox by Yair Even Or (@vsync) on CodePen.light

Author

  • Yair Even Or

Made with

  • Html / CSS / JS
Demo and Download

Travel Gallery

Travel gallery with flexbox and CSS animations/transitions.

See the Pen Travel Gallery (Flexbox and CSS Animations/Transitions) by Sean Free (@seanfree) on CodePen.light

Author

  • Sean Free

Made with

  • Html / CSS (SCSS) / Javascript
Demo and Download

Slide-out Scrolling Gallery

A gallery that reveals three panels as the user scrolls.

See the Pen Slide-out Scrolling Gallery by Teegan Lincoln (@teeganlincoln) on CodePen.light

Author

  • Teegan Lincoln

Made with

  • Html / CSS
Demo and Download

Quad Image Gallery

Transitioned gallery for four images.

See the Pen Quad Image Gallery by Dudley Storey (@dudleystorey) on CodePen.light

Author

  • Dudley Storey

Made with

  • Html / CSS /JS
Demo and Download

Gallery With Wave Transition Effect

It has 24 1920×1080 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.

See the Pen Gallery with wave transition effect. by Kirill Kiyutin (@kiyutink) on CodePen.light

Author

  • Kirill Kiyutin

Made with

  • Html / CSS / JS
Demo and Download

Portfolio Gallery

Portfolio gallery with HTML, CSS and JavaScript.

See the Pen Balkan Style – Portfolio Gallery by Srdjan Pajdic (@MightyShaban) on CodePen.light

Author

  • Srdjan Pajdic

Made with

  • Html / CSS / Javascript
Demo and Download

FOLIO.TRANSITIONS

Out of the box page & section transitions with Foliodot.

See the Pen folio.transitions by Foliodot (@foliodot) on CodePen.light

Author

  • Foliodot
  • 16.03.2017

Made with

  • HTML
  • CSS (folio.css)
  • JavaScript (folio.js)

Google Photos Material Gallery

A vanilla javascript photo gallery plugin inspired by Google Photos.

See the Pen Google Photos Material Gallery by Ettrics (@ettrics) on CodePen.light

Author

  • Ettrics

Made with

  • Html / CSS
Demo and Download

Rollover CSS Blur Filter Image Gallery

Utilizing CSS transitions & transforms and the CSS blur filter.

See the Pen Rollover CSSS Blur Filter Image Gallery by sjmcpherson (@sjmcpherson) on CodePen.light

Author

  • sjmcpherson

Made with

  • CSS
Demo and Download

Photo Gallery

HTML, CSS and JavaScript photo gallery.

See the Pen Treehouse: Photo Gallery by charlie hield (@stursby) on CodePen.light

Author

  • charlie hield

Made with

  • Html / CSS / Javascript
Demo and Download

Flip Image Gallery With Content

A flip animation image with some hidden preview.

See the Pen Flip image gallery with content by Aleh Isakau (@piupiupiu) on CodePen.light

Author

  • Aleh Isakau

Made with

  • Html / CSS / JS
Demo and Download

Accessible Off-Canvas Grid Gallery

Accessible grid style gallery with off-canvas image details prototype with focus management and keyboard support.

See the Pen Accessible off-canvas grid gallery by Joe Watkins (@joe-watkins) on CodePen.light

Author

  • Joe Watkins

Made with

  • Html / CSS / JS
Demo and Download

Split Screen Gallery

A split screen gallery for telling a story or showing a slideshow.

See the Pen A split screen gallery by Eduardo Bouças (@eduardoboucas) on CodePen.light

Author

  • Eduardo Bouças

Made with

  • Html / CSS / JS
Demo and Download

Vertical Gallery

Just a full width vertical gallery. Content with a toggle description.

See the Pen Full Width Vertical Gallery / Content with Toggle Description by Elizabet Oliveira (@miukimiu) on CodePen.light

Author

  • Elizabet Oliveira

Made with

  • Html / CSS / JS
Demo and Download

3D Tilted Scrolling Image Gallery

Here’s a nice 3D tilted scrolling image gallery implemented using Pete Rojwongsuriya’s jquery.tilted-pagescroll plug-in.

See the Pen 3D Tilted Scrolling Image Gallery by Sebastian Schepis (@sschepis) on CodePen.light

Author

  • Sebastian Schepis

Made with

  • Html / CSS / JS
Demo and Download