CSS lightbox

A responsive CSS-only lightbox: view demo.

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

TO DO

• add Next and Previous buttons?
• make entire image click to close

DONE

• 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 anduse 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

---

Extensively adapted from good foundations: Create a pure css image lightbox