Photo Gallery with Lightbox — Free HTML CSS JS Snippet

A professional photo gallery needs two layers: a compact grid that shows thumbnails at a glance, and a full-screen lightbox for focused viewing. This snippet delivers both — a CSS grid with wide and tall spanning items, smooth hover overlays with a zoom-in icon, and a full-screen lightbox with fade-in animation, prev/next arrows, keyboard navigation (Escape, arrow keys), touch swipe, caption display, and position counter — all in pure HTML, CSS, and vanilla JavaScript.

A well-built photo gallery is one of the most complex layout challenges in UI development: it must present many images compactly without reflow jank, handle images of different aspect ratios gracefully, provide a fast path to full-screen viewing, and remain accessible on both desktop and mobile. This snippet covers the complete stack — CSS grid layout, hover overlays, full-screen lightbox, keyboard navigation, swipe gestures, and lazy loading — in pure HTML, CSS, and vanilla JavaScript with no dependencies.

CSS grid with spanning items

The gallery uses display: grid with grid-template-columns: repeat(3, 1fr) and grid-auto-rows: 200px. Items span multiple columns or rows using .item-wide { grid-column: span 2 } and .item-tall { grid-row: span 2 }. This produces a masonry-like layout where feature images can be wider or taller than thumbnails without JavaScript. The key technique for making images fill their grid cell regardless of intrinsic dimensions is width: 100%; height: 100%; object-fit: cover on the <img> element — cover scales the image to fill the container while cropping rather than stretching or leaving whitespace.

Hover overlay animation

Each grid item has a <div class="overlay"> absolutely positioned over the image. On hover, the overlay's background transitions from rgba(0,0,0,0) to rgba(0,0,0,0.45) and a zoom icon SVG transitions from opacity:0; transform:scale(0.7) to opacity:1; transform:scale(1). Simultaneously, the image itself scales up to scale(1.06) via a transform on img:hover, but because overflow:hidden is set on the parent .item, the scaled image stays within the card boundary — the zoom-in feels like you're pushing through the frame.

Lightbox open/close and focus management

Clicking a gallery item calls openLightbox(index) which sets lb.hidden = false, locks the scroll with document.body.style.overflow = 'hidden', and moves keyboard focus to the close button. Closing calls closeLightbox() which sets lb.hidden = true, unlocks scroll, and returns focus to the thumbnail that was clicked (items[current].querySelector('img').focus()). This focus-return pattern is required for screen reader compatibility — without it, keyboard users lose their place in the document after closing the modal.

Photo switching and animation restart

showPhoto() updates lbImg.src, lbImg.alt, the caption, and the counter. To restart the fade-in animation on each photo change, it sets lbImg.style.animation = 'none', forces a reflow with void lbImg.offsetWidth (a sync layout read that flushes the pending style), then clears the inline animation style inside a requestAnimationFrame — this causes the browser to re-apply the keyframe from the stylesheet on the next frame. Without the forced reflow, the browser batches the style change and the animation doesn't restart.

Keyboard and touch navigation

A document.keydown handler checks whether the lightbox is open before acting: Escape closes, ArrowLeft decrements current, ArrowRight increments it. Touch navigation uses touchstart (passive listener for scroll performance) to record startX, and touchend to compute dx. A 50px threshold filters accidental taps.