FreeFrontend

CSS Gallery

March 07, 2017 | 9 Minute Read

HTML and CSS gallery with little JavaScript. Demo and download code (*zip).

Demo Image: Portfolio Gallery
Portfolio Gallery (demo image)

Portfolio Gallery

HTML, CSS and JavaScript portfolio gallery.
Made by Tanmoy Biswas
February 14, 2017

download demo and code

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

Demo Image: HTML And CSS Image Gallery
HTML And CSS Image Gallery (demo image)

HTML And CSS Image Gallery

Image gallery with zoom.
Made by wunnle
February 3, 2017

download demo and code

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

Demo Image: CSS 3D Transform Gallery
CSS 3D Transform Gallery (demo image)

CSS 3D Transform Gallery

Cube rotate 3D transform gallery.
Made by Lorina Gousi
January 30, 2017

download demo and code

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

Demo Image: Photobox
Photobox (demo image)

Photobox

Photobox is the evolution, the next generation of gallery UI & UX code.
Made by Yair Even Or
January 4, 2017

download demo and code

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

Demo Image: Travel Gallery
Travel Gallery (demo image)

Travel Gallery

Travel gallery with flexbox and CSS animations/transitions.
Made by Sean Free
January 2, 2017

download demo and code
Demo Image: Slide-out Scrolling Gallery
Slide-out Scrolling Gallery (demo image)

Slide-out Scrolling Gallery

A gallery that reveals three panels as the user scrolls.
Made by Teegan Lincoln
January 1, 2017

download demo and code

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

Demo Image: Reflective Photo Gallery Wall
Reflective Photo Gallery Wall (demo image)

Reflective Photo Gallery Wall

HTML, CSS and JavaScript reflective photo gallery wall experiment.
Made by Shawn Reisner
October 21, 2016

download demo and code
Demo Image: Quad Image Gallery
Quad Image Gallery (demo image)

Quad Image Gallery

Transitioned gallery for four images.
Made by Dudley Storey
October 14, 2016

download demo and code

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

Demo Image: Gallery With Wave Transition Effect
Gallery With Wave Transition Effect (demo image)

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

download demo and code

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

Demo Image: Portfolio Gallery
Portfolio Gallery (demo image)

Portfolio Gallery

Portfolio gallery with HTML, CSS and JavaScript.
Made by Srdjan Pajdic
June 2, 2016

download demo and code

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

Demo Image: Google Photos Material Gallery
Google Photos Material Gallery (demo image)

Google Photos Material Gallery

A vanilla javascript photo gallery plugin inspired by Google Photos.
Made by Ettrics
January 24, 2016

download demo and code

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

Demo Image: Rollover CSS Blur Filter Image Gallery
Rollover CSS Blur Filter Image Gallery (demo image)

Rollover CSS Blur Filter Image Gallery

Utilizing CSS transitions & transforms and the CSS blur filter.
Made by sjmcpherson
January 18, 2016

download demo and code
Demo Image: Photo Gallery
Photo Gallery (demo image)

Photo Gallery

HTML, CSS and JavaScript photo gallery.
Made by charlie hield
October 29, 2015

download demo and code

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

Demo Image: Flip Image Gallery With Content
Flip Image Gallery With Content (demo image)

Flip Image Gallery With Content

A flip animation image with some hidden preview.
Made by Aleh Isakau
October 11, 2015

download demo and code

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

Demo Image: Accessible Off-Canvas Grid Gallery
Accessible Off-Canvas Grid Gallery (demo image)

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

download demo and code

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

Demo Image: Split Screen Gallery
Split Screen Gallery (demo image)

Split Screen Gallery

A split screen gallery for telling a story or showing a slideshow.
Made by Eduardo Bouças
May 20, 2015

download demo and code

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

Demo Image: Vertical Gallery
Vertical Gallery (demo image)

Vertical Gallery

Just a full width vertical gallery. Content with a toggle description.
Made by Elizabet Oliveira
October 12, 2014

download demo and code
Demo Image: 3D Tilted Scrolling Image Gallery
3D Tilted Scrolling Image Gallery (demo image)

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

download demo and code

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