CSS lightbox

A responsive CSS-only lightbox: view demo.

Tested in: Chrome, Edge (OS X/Win), Firefox, Safari (desktop/mobile), Brave

TO DO

• add Next and Previous buttons?
• animate opacity on close (hm. Fixes welcome!)

DONE

• simplify close box with position: absolute
• move figcaption to bottom and centre text
• make opacity default animation, leave drop-down as option
• make entire image click to close
• make gallery preview image height adjustable
• use CSS custom properties for some colors
• fix non-scrolling image height issue
• rewrite HTML and CSS to use figure and use figcaption tags
• set CSS variables for the crucial dimensions
• fix bug where part of the clickable preview is obscured at wider screen sizes
• center the preview image with object-fit and object-position
• add breakpoint to separate larger from mobile sizes

---

Very extensively adapted from a good foundation: Create a pure css image lightbox