Grid Lightbox Gallery Effect

This is a CSS Grid Lightbox Gallery Effect. It structures an asymmetric image grid that expands individual photos into a full-screen, blurred overlay upon interaction. Its primary function is to focus user attention on a single visual asset while maintaining the context of the underlying page through transparency.

Specs

• Weight: < 2 KB (Zero dependencies).
• Performance: Fluid. Uses hardware-accelerated properties (transform: scale, opacity, backdrop-filter).
• Responsiveness: Native. grid-template-columns: repeat(auto-fit, 150px) automatically wraps columns based on viewport width without media queries.
• Graceful Degradation: [!] If backdrop-filter is unsupported by the browser, the overlay degrades perfectly to a solid translucent background (hsla(0, 0%, 0%, 0.6)).

Anatomy

• HTML (The Skeleton): A semantic <main> container wrapping anchor tags and <img> nodes. The overlay is a standalone <div> at the bottom of the DOM containing a single dynamic image and an SVG close button.
• CSS (The Skin): CSS Grid powers the layout. grid-auto-flow: dense fills empty spaces, while targeted elements (nth-of-type) span multiple rows/columns to break the visual monotony.
• JS (The Nervous System): A localized script that extracts the src and alt attributes from the clicked thumbnail, injects them into the overlay image, toggles the modal’s visibility, and manages accessibility states.

Logic

The standout technical detail is the manual accessibility routing during the modal state.

// to remove the anchor links from reach set the tabindex attribute to a negative value
links.forEach(link => link.setAttribute('tabindex', -1));

When an overlay opens, the background elements are visually obscured but remain technically focusable by keyboards and screen readers. By iterating through the grid links and dynamically setting tabindex="-1", the script traps the user’s focus within the active modal layer, preventing invisible background navigation. This state is cleanly reversed when the modal closes.

Feel

Snappy and isolating. The dense grid creates a tightly packed visual wall. Clicking an image instantly dims the surrounding interface with a frosted glass effect, physically separating the targeted image from the noise. The zoom transition on hover hints at the expansion to come.