by, 04-28-2014 at 09:30 AM (20761 Views)
The latest CSS-only offering is my attempt at an image gallery where image enlargements open in a modal window. It was inspired by a tutorial on modal popups and uses the :target selector in CSS to match the hash at the end of an URL with the id of a corresponding element.
The logic for this (taken from the modal popups tutorial) is that a hashed URL can be wrapped around a small thumb image, which matches the id of an image enlargement in a modal overlay div. When the hashed small thumb image is clicked, CSS "targets" the matching id of a hidden image and then displays it by changing the CSS state.
A CSS-only, responsive image gallery that;
- Opens an image enlargement in a modal overlay/lightbox (by using the :target selector)
- Has "previous" and "next" controls to cycle through the gallery from within the modal overlay/lightbox
- On a small screen, the "previous" and "next" controls become extra large tappable areas for easy finger jabbing
- Uses CSS3 transitions to animate a gentle fade effect (on thumbs and modal overlay/lightbox)
- Includes optional image captions (inside the modal overlay/lightbox)
Compatibility: Modern browsers and IE9+, with alternative markup for IE7/8 to allow those users to view the larger images in a new window.
Pros/Cons of the CSS-only version
The main pro for this approach is also its biggest con - all images are download when the page is first loaded, but this is not great for mobile, or performance in general.