DIAMOND SHAPE GRID

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

PHOTO GALLERY

A masonry style photo gallery.

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

HIVE PHOTO GALLERY GRID

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

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.

WINTER GALLERY

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

RHOMB GALLERY ON GRIDS

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

FASHION ISOMETRIC GALLERY

Experiment for testing isometric ecommerce layout concept.

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

DROP SPREAD BLUR

Only CSS gallery with drop spread blur effect.

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

GALLERY

Gallery with hover effect.

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

HEXAGON GALLERY

CSS only hexagon gallery.

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

ACCORDION GALLERY ZOOM ANIMATION

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

MASONRY GALLERY

Responsive CSS Grid masonry gallery.

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

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.

GALLERY

Masonry gallery with scroll effect.

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

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.

SIMPLICITY

Simple gallery in HTML, CSS and JS.

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

PRODUCT GALLERY

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

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

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.

SEASONS GALLERY

Pure CSS image gallery.

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

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.

IMAGE GALLERY

Parallax image gallery using figure & figcaption.

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

CSS GALLERY

Image gallery made with flexbox and CSS grid.

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

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.

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.

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.

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.

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.

PHOTO GALLERY

See the gallery by clicking on the windows.

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

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.

Portfolio Gallery

HTML, CSS and JavaScript portfolio gallery.

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

HTML And CSS Image Gallery

Image gallery with zoom.

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

CSS 3D Transform Gallery

Cube rotate 3D transform gallery.

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

GALLERY HOVER EFFECT

Gallery hover effect and gallery expanded.

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

Photobox

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

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

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.

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.

Quad Image Gallery

Transitioned gallery for four images.

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

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.

Portfolio Gallery

Portfolio gallery with HTML, CSS and JavaScript.

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

FOLIO.TRANSITIONS

Out of the box page & section transitions with Foliodot.

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

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.

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.

Photo Gallery

HTML, CSS and JavaScript photo gallery.

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

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.

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.

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.

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.

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.