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 other articles in this series.
Total time: 12 hours
Image captions animated with filters and transforms
- HTML5 Transitioned Image Captions
- Captioned Domino Image
- Animated Inset Caption with Filter
- Sliding Door Reveal
- Filtered Caption with Dynamic Clip
Image galleries with large image revealed on hover/touch for their associated thumbnails. Generally speaking, the simplest kind of gallery to make.
- Simple CSS Rollover Gallery
- Cross-fade and Slide
- Card Fan Gallery
- Hover Effect from Different Directions
- object-fit Gallery
Image galleries with the large image activated on a click or touch on the thumbnail; also features galleries with preset and “persistent” images.
- Animated Gallery w/ Persistent Images
- Alternative Persistent Image Gallery
- Simple PHP Image Gallery
- Simple Responsive Image Gallery
- Accessible Image Gallery
- Quad-Image Gallery
Galleries that use flexbox for display; also see filtered, random and columnar galleries.
Galleries where the full-size image completely dominates the browser window.
Sliders & Carousels
- Animated Image Slider
- Responsive Slider
- Responsive Slider With Captions
- CSSslidy: Auto-Generated Responsive Image Slider
- CSSslidy 2.0
- CSSFadey: Auto-Generated Responsive Image Gallery
3D Image Galleries & Effects
- Origami: CSS3D Foldout Image Gallery
- ImgDex: Rolodex-Style 3D Image Gallery
- Simple CSS 3D Carousel Gallery
- Advanced CSS 3D Carousel
- Image Flip Gallery With Dynamic Shadows
- Seasonal CSS: Falling Leaves
- Venetian Blend Effect
Layouts with UI to filter and sort images.
Techniques for creating easy “before and after” comparisons on web pages to display PhotoShop retouching, sketch to finished product, etc.
Techniques to display images in columns
- Pinterest-Style Layout in Pure CSS
- Easy Masonry Layout with Flexbox
- Easy Responsive Grid With Flexbox
Images that appear in random order on each page load.
Ken Burns Effects
Full-screen (or full-element) effects that introduce images with a familiar zoom, pan and fade.
Techniques for making images appear one after another on a page.
Photographs by Paul Cox, licensed under Creative Commons
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.