A series of photographs in a roll-out display

Teaching digital media classes with an emphasis on graduate portfolios, I have a great many students interested in creating galleries for their final sites; as a result, I’ve designed and coded many different image gallery concepts on this blog. This reading list pulls them all together, using the same structure as .

Captions On-hover On-click Flexbox Lightboxes Sliders & Carousels 3D Filtered Comparators Columns Randomized Ken Burns Sequential Caption Creators

Prerequisites: HTML & CSS. Some galleries also use JavaScript and/or .

Total time: 12 hours

Captions

Image captions animated with filters and transforms

  1. HTML5 Transitioned Image Captions
  2. Captioned Domino Image
  3. Animated Inset Caption with Filter
  4. Sliding Door Reveal
  5. Filtered Caption with Dynamic Clip

On-hover Galleries

Image galleries with large image revealed on hover/touch for their associated thumbnails. Generally speaking, the simplest kind of gallery to make.

  1. Simple CSS Rollover Gallery
  2. Cross-fade and Slide
  3. Card Fan Gallery
  4. Hover Effect from Different Directions
  5. object-fit Gallery

On-click Galleries

Image galleries with the large image activated on a click or touch on the thumbnail; also features galleries with preset and “persistent” images.

  1. Animated Gallery w/ Persistent Images
  2. Alternative Persistent Image Gallery
  3. Simple PHP Image Gallery
  4. Simple Responsive Image Gallery
  5. Accessible Image Gallery
  6. Quad-Image Gallery

Flexbox Galleries

Galleries that use flexbox for display; also see filtered, random and columnar galleries.

  1. Better Responsive Galleries with Flexbox
  2. Modern Masonry with Flexbox & JS

Lightboxes

Galleries where the full-size image completely dominates the browser window.

  1. Lightbox in Pure CSS
  2. Lightbox in 12 Lines of JS

Sliders & Carousels

  1. Animated Image Slider
  2. Responsive Slider
  3. Responsive Slider With Captions
  4. CSSslidy: Auto-Generated Responsive Image Slider
  5. CSSslidy 2.0
  6. CSSFadey: Auto-Generated Responsive Image Gallery

3D Image Galleries & Effects

  1. Origami: CSS3D Foldout Image Gallery
  2. ImgDex: Rolodex-Style 3D Image Gallery
  3. Simple CSS 3D Carousel Gallery
  4. Advanced CSS 3D Carousel
  5. Image Flip Gallery With Dynamic Shadows
  6. Seasonal CSS: Falling Leaves
  7. Venetian Blend Effect

Filtered Galleries

Layouts with UI to filter and sort images.

  1. Auto-Filter Image Gallery
  2. Visual Database Gallery
  3. Sorting Images with JS
  4. Filtered Flexbox

Comparators

Techniques for creating easy “before and after” comparisons on web pages to display PhotoShop retouching, sketch to finished product, etc.

Image Comparators

  1. “Before And After” Image Comparison
  2. Mobile-Ready Before-and-After
  3. Scratch-Off Image Reveal

Video Comparators

  1. “Before & After” Video Comparison
  2. Before & After Video Comparison w/ canvas

Columnar Layout

Techniques to display images in columns

  1. Pinterest-Style Layout in Pure CSS
  2. Easy Masonry Layout with Flexbox
  3. Easy Responsive Grid With Flexbox

Randomized Images

Images that appear in random order on each page load.

  1. Random Images w/ Flexbox & JS
  2. Random Images w/ PHP
  3. Random Scattered Images

Ken Burns Effects

Full-screen (or full-element) effects that introduce images with a familiar zoom, pan and fade.

  1. BurnsBox

Sequential Faders

Techniques for making images appear one after another on a page.

  1. Sequential Fade-In with CSS
  2. Sequential Image Fade-In with JS & CSS

Caption Creation

Auto-generating image captions using JavaScript & PHP.

  1. Auto-Caption Using Filenames
  2. Auto-Caption Using GET
  3. Auto-Generated Captions with JS

Photographs by Paul Cox, licensed under Creative Commons

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.