Thumbnail Gallery — Free HTML CSS JS Image Snippet

The thumbnail gallery is the standard way e-commerce sites show multiple product photos: one large main image, a row of smaller thumbnails beneath it, and a click on any thumbnail swaps it into the main view. Amazon, Shopify storefronts, and almost every product detail page use this pattern because it lets a shopper see one image clearly while keeping every alternate angle one click away. This component implements it in plain HTML, CSS, and vanilla JavaScript, with a smooth cross-fade between images, an active-thumbnail highlight, and full keyboard navigation. It uses CSS gradients as stand-in images so it runs with no external assets, but swapping in real <img> tags is a one-line change.

Layout: aspect-ratio main stage and a grid of thumbs

The main view uses aspect-ratio: 1 / 1 so it stays perfectly square at any width without a fixed pixel height — the modern replacement for the old padding-top percentage hack. The thumbnail strip is a five-column CSS grid with a consistent gap, and each thumbnail also uses aspect-ratio: 1 / 1 so the row of thumbs is always uniform regardless of the container width. Because both the stage and thumbs are ratio-locked, the whole gallery scales fluidly inside its max-width wrapper.

Data-driven rendering

The gallery is driven by an IMAGES array of { label, bg } objects. On load, the script loops over the array with document.createElement to build each thumbnail <button>, attach its click handler, and apply its background. This data-driven approach means adding or removing an image is a matter of editing the array — no markup changes. Each thumbnail is a real <button> (not a div) so it is focusable and clickable by keyboard out of the box, and it carries role="tab" and aria-selected so assistive technology understands the gallery as a set of selectable views.

The cross-fade transition

Clicking a thumbnail does not snap the main image — it cross-fades. The select() function adds a .fading class that animates the stage's opacity to 0 over 180ms, then in a setTimeout it swaps the background and label and removes the class, fading the new image back in. This fade-out-swap-fade-in sequence hides the hard cut and makes the gallery feel polished. The timeout duration is matched to the CSS transition so the swap happens exactly at the invisible midpoint. A guard at the top of select() returns early if you click the already-active thumbnail, so there is no pointless fade.

Active-state highlighting

The selected thumbnail gets an .active class that shows an indigo border and removes a translucent white overlay. Every thumbnail has a ::after pseudo-element that lays a semi-transparent white veil over it; inactive thumbs are dimmed by this veil, the hovered thumb is partly cleared, and the active thumb is fully cleared and bordered. This is a pure-CSS way to make the current selection pop without changing the image itself, and it gives instant hover feedback with no JavaScript.

Keyboard navigation

The thumbnail strip listens for ArrowRight and ArrowLeft on keydown. Pressing an arrow computes the next index with wrap-around using (active + dir + length) % length — so the selection cycles from the last thumb back to the first and vice versa — calls select(), and moves focus to the newly active thumbnail with .focus(). This makes the gallery fully operable without a mouse, matching the keyboard expectations of a tablist.

Customisation

To use real photos, replace the gradient bg values with image URLs and render an <img src> inside each thumbnail and the stage instead of setting a background. Change grid-template-columns: repeat(5, 1fr) to show more or fewer thumbnails per row, swap the #6366f1 active-border colour for your brand, and adjust the 180ms fade timing (in both the CSS transition and the JS timeout together) to make swaps faster or slower.