A large collection of links about galleries and everything connected with them.

Dudley Storey, author of Pro CSS3 Animation, presented a selection of his articles from the site demosthenes.info about galleries on sites and everything related to them. Solutions use HTML, CSS and PHP in various combinations, the text of articles in English. At the beginning of each article presents a demonstration of the effect of which the author speaks.

Signatures

Animated signatures with filters and transformation:

• Creating signatures using CSS transitions
• 3D dominoes with signature
• Animated caption insertion with background filtering
• Signature appears with filtering and using the clip property
• The appearance of different captions when hovering on different parts of the same image

On-hover galleries

Galleries of images with large images, drop-down on hover / touch on the thumbnail. In fact, the simplest types of galleries.
')

• Simple CSS gallery
• Animated gallery with slideshow and shading effect on CSS3
• Simple gallery with fan effect on CSS
• Unfolding thumbnails using the object-fit property

On-click galleries

Galleries of images with large images, drop-down by clicking on the thumbnail.

• Animated gallery with a permanent (image, the expanded version of which, opens when the page loads) image
• Gallery with a permanent image. Part 2
• Simple PHP gallery
• Another simple gallery
• Gallery with four blocks

Flexbox Galleries

Galleries that use the Flexbox element

• Responsive Flexbox Based Gallery
• Modern tile with Flexbox

Lightboxes

Galleries with images, the display of the full size of which limits the functionality of the page.

• Pure CSS lightbox
• Lightbox in 12 lines JS

Sliders and carousels

• Animated slider
• Responsive slider
• Responsive slider with captions
• CSSslidy: generated responsive slider
• CSSslidy 2.0

3D galleries and effects

• Origami: CSS3D Foldable Gallery
• ImgDex: HTML5 gallery imitating a rotating catalog with cards
• Simple 3D CSS Carousel
• Advanced CSS 3D Carousel
• Rotating images with dynamic shadows

Content filters

User friendly filtering and sorting of images

• Gallery auto filtering
• Pure CSS Visual Database
• Sort Images with JS
• Flexbox and filtering

Change images

Technique for creating simple options "before and after" to demonstrate the source code and the result of the work.

• “Before and after”, image conversion
• “Before and after” for mobile sites

Grid systems

Solutions for displaying images as a grid

• Pinterest-Style mockup on pure CSS
• Simple tile with flexbox
• Simple responsive mesh with Flexbox

Image randomization

Images that appear in random order each time the page loads.

• Randomization with Flexbox and JS
• Randomization with PHP

Using the Ken Burns Effect

Full-size images that zoom in with the zoom stop and disappear.

• Random Ken Burns Effect
• Burnsbox

Consistent appearance

Solutions for organizing the appearance of images one after another

• Using jQuery and CSS
• Using JS and CSS

Signature generation

Automatic generation of image captions using JavaScript & PHP.

• Auto-generate signatures based on file name
• Auto-generate signatures with GET
• Auto-generate signatures with JS