22 CSS Image Galleries

A CSS image gallery arranges photos in a grid, carousel, or stacked layout — the dominant content pattern for portfolios, e-commerce, photo blogs, editorial sites, real-estate listings, and Airbnb-style property pages. Six canonical layout families ship in this collection: 1. Grid / Masonry (Masonry, Metro Tile, Magazine, Hexagon Honeycomb, Aspect-Ratio Justified) — uniform tiles or staggered-height Pinterest-style columns; best for content-heavy collections and Flickr-style photo streams. 2. Filmstrip / Carousel (Filmstrip Carousel, Infinite Scroll Strip) — horizontal scroll-snap row; best for product photos and photojournalism timelines. 3. Stacked / Polaroid (Polaroid Stack, Perspective Depth Stack, Scattered Photos) — overlapping cards or scattered photos; best for wedding photographers, editorial brands, and creative portfolios. 4. Interactive viewer (Lightbox Overlay, 3D Cube Viewer, Ken Burns Slideshow) — one large image at a time with navigation; best for individual-work focus. 5. Hover-revealed / focus (Tilt Parallax, Mosaic Zoom, Diagonal Slice, Glassmorphism Cards, Accordion, :has() Hover Spotlight, Flexbox Expanding Panel) — image grid that reveals captions, zooms, or dims siblings on hover; best for agency portfolios. 6. Motion / physics (Radial Orbit, Interactive Pointer Trail) — orbital rings, cursor-followed trails; best for brand playground and experiential portfolios. Decision rule: if visitors need to BROWSE many photos quickly → grid or masonry. If they need to FOCUS on one image → lightbox or cube. If the gallery is BRAND-driven (portfolio, agency) → stacked, hover-revealed, or motion. Every demo uses scoped .gl-NN class names (numeric per-demo prefix matching the tighter standard) so you can drop multiple onto the same page without conflicts.

Yes — the canonical pure-CSS lightbox uses the :target pseudo-class. Wrap each thumbnail in <a href='#image-1'>, then a fullscreen overlay with id='image-1' that's opacity: 0; pointer-events: none at rest. When the URL hash matches (:target), the overlay becomes opacity: 1; pointer-events: auto and the image appears. Close with a sibling link <a href='#close'> or by hashchange. the Lightbox Overlay demo ships this pattern with the modern alternative: the checkbox-hack (hidden <input type='radio'> + sibling selectors) which avoids polluting browser history with hash entries — important for back-button UX. Modern alternative (Chrome 114+, Safari 17+, Firefox 125+): the HTML Popover API with popover='auto' and popovertarget gives you a native top-layer overlay with built-in click-outside-close + Escape dismissal — zero JavaScript needed for a complete a11y-compliant lightbox. For production sites: a 30-line vanilla JS lightbox is often simpler than the CSS gymnastics — adds keyboard nav (arrow keys), pinch-zoom, swipe gestures, and analytics. The :target / checkbox-hack approach is best for marketing pages where no-JS is a hard requirement.

lightGallery (~95KB minified, jQuery-based originally now vanilla, paid pro tier for video/zoom): industry-standard with thumbnails strip, fullscreen, share, download, video support. Best for client photography portfolios. PhotoSwipe (~35KB, vanilla JS): touch-first lightbox with pinch zoom and swipe — the default for mobile-first photography sites. Fancybox (~120KB, jQuery + own deps): feature-rich but heavy; consider only for legacy projects. Lightbox2 (~10KB + jQuery): the original lightbox library; simple but dated, no longer maintained — replace with PhotoSwipe. Magnific Popup (~30KB + jQuery): lighter Fancybox alternative, still jQuery-dependent. react-image-gallery (~25KB + React peer): the dominant React component, used by Airbnb/Etsy-style product pages. react-photo-gallery (~15KB): justified-layout masonry for React. This collection vs all of the above: 7 demos are PURE CSS (zero JS), 9 ship vanilla JS in ~10–40 lines each. Total bundle: 0KB to ~3KB per demo embedded in your page, no npm dependency, no CVE surface, no jQuery requirement. For 90% of marketing / portfolio / e-commerce use cases, the demos here win on Core Web Vitals (LCP, INP) by shipping zero or minimal JavaScript. Reserve the libraries above for apps where you need every feature (video, zoom, sharing, analytics) packaged together.

Image gallery a11y has FIVE requirements most tutorials miss. 1. Real alt text on EVERY image — not alt='' (which marks the image decorative). Describe what's in the photo as if you were narrating it to a friend on the phone. For a wedding gallery, alt is 'Bride and groom kissing under a cherry blossom arch at sunset', NOT 'IMG_4523'. 2. Lightbox aria pattern: when an image opens fullscreen, the lightbox is a MODAL DIALOG — needs role='dialog' + aria-modal='true' + aria-label (e.g. 'Image viewer'). Focus must move INTO the lightbox on open and RETURN to the trigger thumbnail on close (focus trap inside until close). 3. Keyboard navigation: Escape closes the lightbox. ArrowLeft / ArrowRight navigate prev/next image. Tab cycles between Prev / Image / Next / Close inside the modal. 4. Screen reader announcement: when navigating to next image, announce the new image's caption via aria-live='polite' region. 5. Decorative captions: caption text duplicates alt text? Mark caption as aria-hidden='true' to avoid double-announcement. Mismatched? Mark the image's alt as the more-descriptive of the two. Regulatory frameworks: WCAG 2.2 (especially 1.1.1 Non-text Content), EU EAA (June 2025), US Section 508, Canada ACA, UK Equality Act. Test with axe DevTools, Lighthouse, WAVE, NVDA / VoiceOver. the Lightbox Overlay demo ships the full lightbox a11y pattern.

Image-heavy pages are a Core Web Vitals nightmare without these five fixes. 1. Always set width and height on <img>: this lets the browser reserve layout space BEFORE the image downloads, preventing the content shift when images load late. Modern browsers compute aspect-ratio from these attrs automatically. 2. loading='lazy' on below-the-fold images: browser-native lazy loading, zero JS. The first 2-3 images visible above the fold should be loading='eager' + fetchpriority='high' so LCP fires fast. 3. Responsive images with srcset + sizes: serve a 400px-wide image to mobile, 1200px to desktop, etc. — saves 60-80% of bytes on mobile. Use the <picture> element for art-direction (different crop for mobile vs desktop). 4. Modern image formats: AVIF (best compression, ~50% smaller than JPEG), WebP (good browser support, ~30% smaller), with JPEG fallback. <picture> + <source type='image/avif'> + <source type='image/webp'> + JPEG <img> fallback. 5. CDN with on-the-fly resizing: Cloudinary, ImageKit, Cloudflare Images, or Vercel Image Optimization let you request image.jpg?w=400&format=auto and the CDN serves the optimal format/size per request. Tools: Chrome DevTools Performance Insights, Lighthouse, PageSpeed Insights, WebPageTest, Web Vitals extension. Every demo in this collection uses inline SVG art (zero HTTP requests, infinite scalability, zero CLS) — but for production, swap the SVG <svg> for <img loading='lazy' srcset='...' width='...' height='...' alt='...'>.

Pure CSS handles a LOT — and the answers are getting better in 2026. Pure-CSS works for: masonry layout (CSS columns or the new grid-template-rows: masonry behind a flag), hover effects (zoom, caption reveal, parallax-tilt approximation), lightbox via :target or checkbox-hack (the Lightbox Overlay demo ships both), CSS-only image accordion (the Accordion Image Gallery demo — uses radio inputs + sibling selectors), perspective stacks (the Perspective Depth Stack demo), polaroid scattered layouts (the Scattered Photos demo — using :nth-child rotations), magazine asymmetric grids (the Magazine Layout demo — CSS Grid + named areas), metro tile uniform grids (the Metro Tile Grid demo), diagonal clip-path reveals (the Diagonal Slice Reveal demo), and glassmorphism hover (the Glassmorphism Hover Cards demo). JavaScript is required for: true infinite scroll (DOM-injecting new images as user scrolls — the Infinite Scroll Image Strip demo), real mousemove-driven parallax tilt (CSS-only tilt approximations exist but mousemove gives pixel precision — the Tilt Parallax demo), filmstrip carousel auto-advance + swipe gestures (the Filmstrip Carousel demo), 3D cube viewer with arrow navigation (the 3D Cube Viewer demo), random rotation generation for scattered layouts (the Scattered Photos demo picks random angles per session), Ken Burns slideshow auto-advance + manual nav (the Ken Burns Slideshow demo), keyboard arrows + focus management inside the lightbox (the Lightbox Overlay demo's JS-enhanced variant). Modern alternatives: scroll-snap-type: x mandatory + scroll-snap-align: start gives you a swipe carousel WITHOUT JavaScript (Chrome 69+, Safari 11+, Firefox 68+). @scroll-timeline + animation-timeline: scroll() let you do scroll-driven parallax effects in pure CSS (Chrome 115+). The 'CSS or JS?' line is moving — re-evaluate every 2 years.

Tailwind CSS: no first-class gallery component; you compose with utility classes (grid grid-cols-3 gap-4 for grid, columns-3 break-inside-avoid for masonry). Tailwind UI ($300+/yr) ships a few gallery templates. Our CSS to Tailwind converter handles paste-conversion of any demo here. shadcn/ui: no dedicated gallery; community pattern uses Tailwind grid + Dialog component for lightbox. Material UI / MUI: ships <ImageList> + <ImageListItem> components for masonry/standard/quilted/woven grids — convenient but adds ~15KB to bundle. Chakra UI: no dedicated gallery; compose with <Grid> + <Image>. Ant Design: <Image.PreviewGroup> ships a built-in lightbox with prev/next + zoom — most feature-complete out of all React libraries. Mantine: <SimpleGrid> + <Image> for grid; community packages for masonry. react-photo-album (~12KB): the dominant 'justified row' gallery library (Flickr-style). This collection vs all of the above: 16 layout patterns, framework-free CSS that drops into ANY of these libraries. Use the demos as design references — copy a CSS pattern into your MUI / Chakra / shadcn project; the underlying CSS works regardless of framework. For lightbox specifically, MUI ImageList and Ant Design Image.PreviewGroup are production-ready out of the box; consider those if you're already in their ecosystem.

Three masonry techniques, each with trade-offs. 1. CSS columns: 3 (the Masonry demo) — the long-standing pure-CSS approach. Browser flows items top-to-bottom in each column, then left-to-right across columns. Pros: zero JS, automatic. Cons: visual reading order doesn't match DOM order (item 4 might appear in column 2 even though item 3 is in column 1) — bad for accessibility and sequential reading. 2. CSS Grid masonry: grid-template-rows: masonry + grid-template-columns: repeat(3, 1fr) — the modern proposed standard. Items flow left-to-right (matching DOM order, fixing the columns issue), then top-down into the shortest column. Currently behind a flag in Firefox (about:config layout.css.grid-template-masonry-value.enabled); Chrome and Safari haven't shipped yet as of 2026 mid-year. 3. JavaScript libraries (Masonry.js ~30KB, Bricks.js ~10KB, react-masonry-css ~5KB, react-photo-album ~12KB): compute item positions imperatively and use absolute positioning. Cons: bundle weight, requires re-layout on resize/image-load, can cause CLS. Pros: works everywhere, controls reading order strictly. Recommendation: for marketing pages where reading order doesn't matter (Pinterest-style discovery), use CSS columns (the Masonry demo). For chronological content (blog grid, photojournalism timeline), wait for grid-template-rows:masonry to ship in Chrome/Safari OR use a small JS library that preserves DOM order. Avoid the heavy libraries for new projects.

loading='lazy' defers loading until the image scrolls near the viewport — saves bandwidth and improves Time-to-Interactive. But applied wrong, it HURTS Core Web Vitals. Rule 1: NEVER lazy-load above-the-fold images. The first hero image, the first 2-3 visible gallery thumbnails, the LCP candidate — all must be loading='eager' (the default) PLUS fetchpriority='high' on the LCP image specifically. Lazy-loading the LCP image delays it by ~500-1000ms while the browser figures out 'is this in viewport yet?', tanking your LCP score. Rule 2: loading='lazy' is browser-native, not a JS library. Don't combine native lazy with a JS lazy library (Intersection Observer pattern) — they double-defer and cause flashes. Pick one. Rule 3: fetchpriority matters more than people realize. fetchpriority='high' on the LCP image, fetchpriority='low' on below-the-fold images (combined with loading='lazy'). The browser prioritizes high-priority downloads even when network is congested. Rule 4: decoded vs not-yet-decoded. decoding='async' on every image lets the main thread paint before the image is decoded — pairs naturally with loading='lazy'. The complete recipe: <img src='...' srcset='... 400w, ... 800w, ... 1200w' sizes='(max-width:600px) 100vw, 33vw' loading='lazy' decoding='async' width='400' height='300' alt='...' fetchpriority='auto'>. For the hero image, swap loading='lazy' → loading='eager' and fetchpriority='auto' → fetchpriority='high'. Verify with Lighthouse, PageSpeed Insights, Chrome DevTools Performance Insights.

Real-estate photo galleries have specific requirements the marketing world doesn't share, so the pattern choice matters. Buyers evaluate listings visually first — the hero image + photo-count reads as trust — and every listing photo is scanned in ~1.5 seconds per photo per Baymard eye-tracking research on Zillow, Redfin, and Realtor.com. Three patterns from this collection fit the vertical: 1. The Aspect-Ratio Justified Gallery (one of the 6 new demos) — Google Images / Flickr-style rows where every image is normalized to the same row height while preserving its native aspect ratio via a flexbox flex-grow layout. This is the exact anatomy Zillow's photo gallery and Airbnb's listing modal use — 24 photos flow into ragged-right rows with no visible gaps, and buyers can browse all 24 with two flicks of the scroll wheel. 2. The Filmstrip Carousel with photo-count badge overlay — the pattern Redfin, Realtor.com, and Vrbo use for the LISTING CARD (not the modal). Shows the hero image with a small "1 / 24 photos" pill in a corner so buyers know how much visual coverage each listing offers. 3. The Lightbox Overlay for the full-screen photo modal — the fullscreen browse experience with keyboard arrow navigation, ESC-to-close, and swipe-through-photos on mobile. Compliance callouts non-negotiable: (1) Fair Housing Act 42 U.S.C. § 3604 prohibits discriminatory imagery — the alt text AND visible listing card must be scrubbed for language that indicates preference or discrimination based on race, color, religion, sex, disability, familial status, or national origin. HUD investigates listings whose imagery systematically hides accessibility features (ramps, wide doorways, ground-floor entrances) in favor of "cleaner" architectural shots. (2) State real-estate license disclosure requirements vary: California DRE, Texas TREC, New York DOS, Florida DBPR all require the listing agent's license number visible on any surface displaying the property. Bake into the card footer. (3) MLS IDX rules require the MLS logo and last-updated timestamp visible on any listing sourced from an MLS feed — check California CRMLS, Texas HAR, New York REBNY, Florida Miami Association of Realtors agreements for the specific disclosure format. For SEO, wrap in itemscope itemtype="https://schema.org/RealEstateListing" with itemprop="floorSize" (QuantitativeValue with unitCode SQFT), itemprop="numberOfBedrooms", itemprop="numberOfBathroomsTotal" — this qualifies the listing for Google Search RealEstateListing rich results with price and beds/baths in the SERP overlay. Real-estate photo galleries carry $15-30 CPM in tier-1 US markets, $25-50 in tier-1 metros (NYC, SF, LA, Seattle, Boston, DC, Miami). Short-term rental Airbnb / Vrbo / Booking.com galleries carry $8-15 CPM standalone, $20-35 CPM once combined with dates-selected or check-availability intent.

Portfolio galleries and agency case-study surfaces have converged on a distinct set of patterns different from real estate — this is BRAND-first content where the aesthetic reads as the trust signal. Three patterns from this collection fit the vertical: 1. The :has() Hover Spotlight Gallery (one of the 6 new demos) — hovering any tile dims the OTHER tiles via .gallery:has(.tile:hover) .tile:not(:hover) { opacity: 0.4 }. This is the exact pattern Read.cv, Framer marketing pages, and Awwwards-featured agency sites (Locomotive, Active Theory, Superhi) use for team-work grids. The subtractive-attention affordance is what separates production-grade from portfolio-only. 2. The Polaroid Stack with random rotation — the wedding photographer aesthetic (The Knot, Zola, Wedding Wire recommend this pattern for engagement-session gallery walls). Randomized :nth-child rotations create the tossed-photo feel. 3. The Radial Orbit Image Gallery (one of the 6 new demos) — orbital ring of images that rotates continuously, best for creative-agency landing pages and brand playground surfaces. Zero-JS, driven by @property --angle + conic-gradient-adjacent transforms. 4. The Ken Burns Slideshow — auto-advancing pan+zoom slideshow, the pattern editorial fashion houses (Vogue, Elle, Harper's Bazaar) and museum digital archives (Met, MoMA, Getty) use for hero galleries. 5. The Flexbox Expanding Panel Gallery (one of the 6 new demos) — hovering any panel expands it to reveal a caption while siblings compress; the Apple-store product-gallery pattern that also fits creative-portfolio case-study cards. E-commerce lookbook and lifestyle-imagery galleries carry $3-7 CPM baseline ($15-25 CPM with add-to-cart intent). Portfolio and agency landing pages carry $8-15 CPM, higher for wedding photography ($10-18, seasonal spikes to $25-35 in Q2 and Q4), fashion editorial ($15-25), and Awwwards-featured agency work ($10-20). Compliance callouts: (1) FTC 16 CFR § 255 (Endorsements Rule, 2024 refresh) requires disclosure of material connections in any client-work gallery — if the photographer was paid, it's not a testimonial, it's advertising, and the client's identity must be accurate. (2) Model release + property release requirements vary by state: California Civil Code § 3344 and New York Civil Rights Law § 50-51 require written model release for commercial use of anyone's likeness (right of publicity — Marilyn Monroe LLC v. AVELA, Rosa Parks Institute litigation set precedent). For property releases, private homes and gated communities require release; publicly-visible architecture generally does not. (3) Copyright metadata: embed IPTC copyright + Creator + Copyright Notice fields in the actual JPEG/PNG so downstream reuse traces back — Google Images Rich Results now surfaces license info from IPTC when present. For SEO, wrap portfolio images in itemscope itemtype="https://schema.org/ImageObject" with itemprop="creator", itemprop="copyrightHolder", itemprop="license" — this qualifies the gallery for Google Images licensable-content SERP overlay.

Yes — all 22 designs are MIT licensed and free for personal and commercial use, including client projects, SaaS products, design systems, and open-source libraries. The MIT license requires only that you keep the copyright notice if you redistribute the source code as-is; in shipped production HTML / CSS that you've adapted, no visible attribution is needed. If you ship one as part of an open-source UI library or component kit, a one-line credit pointing to https://codefronts.com is appreciated but not legally required. Accessibility: the demo HTML uses semantic markup (real <img>, real <a>, real <button> where appropriate), honours prefers-reduced-motion: reduce (animations fall back to instant transitions), and the lightbox demo includes the full a11y pattern (focus trap + Escape key + aria-modal). When swapping the inline SVG placeholders for real <img> elements in production, REQUIRE alt text on every image (see FAQ #4). Verify your specific use case with axe DevTools, Lighthouse, WAVE, NVDA / VoiceOver screen reader testing — the demos are AA-compliant by default but real-world a11y depends on the alt text you write and the context you embed them in.