22 CSS Image Galleries
04 / 22

All 22 in 22 CSS Image Galleries

  1. 01CSS Hexagon Honeycomb Gallery
  2. 02CSS Aspect-Ratio Justified Gallery
  3. 03CSS Flexbox Expanding Panel Gallery
  4. 04CSS :has() Hover Spotlight Gallery
  5. 05CSS Radial Orbit Image Gallery
  6. 06CSS Interactive Pointer Trail Gallery
  7. 07CSS Masonry Image Gallery
  8. 08CSS Metro Tile Grid Gallery
  9. 09CSS Magazine Layout Gallery
  10. 10CSS Lightbox Gallery Overlay
  11. 11CSS Filmstrip Carousel Gallery
  12. 12CSS Accordion Image Gallery
  13. 13CSS Mosaic Zoom Gallery
  14. 14CSS Glassmorphism Hover Cards
  15. 15CSS Diagonal Slice Reveal Gallery
  16. 16CSS Tilt Parallax Image Cards
  17. 17CSS 3D Cube Image Viewer
  18. 18CSS Perspective Depth Stack Gallery
  19. 19CSS Infinite Scroll Image Strip
  20. 20CSS Ken Burns Slideshow Gallery
  21. 21CSS Polaroid Stack Gallery
  22. 22CSS Scattered Photos Gallery
Pure CSSMIT licensed

CSS :has() Hover Spotlight Gallery

Hover any card and every other card in the grid instantly dims and desaturates, spotlighting the one you're on — the modern focus effect built with the :has() relational selector (and :focus-within for keyboards). Zero JS.

Live Demo
Plain CSSTailwind v4
Try it

Build interactive UI like this from scratch: 20 HTML, CSS & JavaScript projects

ZTM · JavaScript Web Projects · 30‑day money-back guarantee · Affiliate link

10% off at checkout with code
Check ZTM Course

The code

<section class="gl-13" aria-label="Spotlight hover gallery">
  <div class="gl-13__grid">
    <a class="gl-13__card" href="#"><img src="https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?q=80&w=400&h=400&auto=format&fit=crop" alt="Tokyo street" loading="lazy" decoding="async"><span>Tokyo</span></a>
    <a class="gl-13__card" href="#"><img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=400&h=400&auto=format&fit=crop" alt="Paris rooftops" loading="lazy" decoding="async"><span>Paris</span></a>
    <a class="gl-13__card" href="#"><img src="https://images.unsplash.com/photo-1467003909585-2f8a72700288?q=80&w=400&h=400&auto=format&fit=crop" alt="New York skyline" loading="lazy" decoding="async"><span>New York</span></a>
    <a class="gl-13__card" href="#"><img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?q=80&w=400&h=400&auto=format&fit=crop" alt="London bridge" loading="lazy" decoding="async"><span>London</span></a>
    <a class="gl-13__card" href="#"><img src="https://images.unsplash.com/photo-1482938289607-e9573fc25ebb?q=80&w=400&h=400&auto=format&fit=crop" alt="Sydney harbour" loading="lazy" decoding="async"><span>Sydney</span></a>
    <a class="gl-13__card" href="#"><img src="https://images.unsplash.com/photo-1595152452543-e5fc28ebc2b8?q=80&w=400&h=400&auto=format&fit=crop" alt="Rome architecture" loading="lazy" decoding="async"><span>Rome</span></a>
    <a class="gl-13__card" href="#"><img src="https://images.unsplash.com/photo-1531891437562-4301cf35b7e4?q=80&w=400&h=400&auto=format&fit=crop" alt="Dubai towers" loading="lazy" decoding="async"><span>Dubai</span></a>
    <a class="gl-13__card" href="#"><img src="https://images.unsplash.com/photo-1474979266404-7eaacbcd87c5?q=80&w=400&h=400&auto=format&fit=crop" alt="Cairo skyline" loading="lazy" decoding="async"><span>Cairo</span></a>
  </div>
</section>
.gl-13,
.gl-13 *,
.gl-13 *::before,
.gl-13 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.gl-13 ::selection {
  background: oklch(0.7 0.17 60);
  color: #111;
}

.gl-13 {
  --accent: oklch(0.72 0.17 60);
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  padding: 40px 20px;
  background: #0f1013;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gl-13__grid {
  width: min(760px,100%);
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4,1fr);
}

.gl-13__card {
  position: relative;
  display: block;
  text-decoration: none;
  border-radius: 12px;
  overflow: hidden;
  background: #1a1c20;
  transition: transform .4s,opacity .4s,filter .4s;
}

.gl-13__card img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.gl-13__card span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 10px 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  background: linear-gradient(0deg,rgba(0,0,0,.75),transparent);
}

.gl-13__grid:has(.gl-13__card:hover) .gl-13__card:not(:hover),
.gl-13__grid:has(.gl-13__card:focus-visible) .gl-13__card:not(:focus-visible) {
  opacity: .4;
  filter: saturate(.35) brightness(.7);
}

.gl-13__card:hover,
.gl-13__card:focus-visible {
  transform: scale(1.06);
  z-index: 2;
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.7);
}

.gl-13__card:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .gl-13__grid {
    grid-template-columns: repeat(2,1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gl-13__card {
    transition: none;
  }
}
/* No JavaScript — .grid:has(.card:hover) .card:not(:hover) dims every non-active card. */
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Image Gallerie from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: CSS :has() Hover Spotlight Gallery
Source: https://codefronts.com/snippets/css-image-gallery/css-has-hover-spotlight-gallery/

Hover any card and every other card in the grid instantly dims and desaturates, spotlighting the one you're on — the modern focus effect built with the :has() relational selector (and :focus-within for keyboards). Zero JS.
## HTML
```html
<section class="gl-13" aria-label="Spotlight hover gallery">
  <div class="gl-13__grid">
    <a class="gl-13__card" href="#"><img src="https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?q=80&w=400&h=400&auto=format&fit=crop" alt="Tokyo street" loading="lazy" decoding="async"><span>Tokyo</span></a>
    <a class="gl-13__card" href="#"><img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=400&h=400&auto=format&fit=crop" alt="Paris rooftops" loading="lazy" decoding="async"><span>Paris</span></a>
    <a class="gl-13__card" href="#"><img src="https://images.unsplash.com/photo-1467003909585-2f8a72700288?q=80&w=400&h=400&auto=format&fit=crop" alt="New York skyline" loading="lazy" decoding="async"><span>New York</span></a>
    <a class="gl-13__card" href="#"><img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?q=80&w=400&h=400&auto=format&fit=crop" alt="London bridge" loading="lazy" decoding="async"><span>London</span></a>
    <a class="gl-13__card" href="#"><img src="https://images.unsplash.com/photo-1482938289607-e9573fc25ebb?q=80&w=400&h=400&auto=format&fit=crop" alt="Sydney harbour" loading="lazy" decoding="async"><span>Sydney</span></a>
    <a class="gl-13__card" href="#"><img src="https://images.unsplash.com/photo-1595152452543-e5fc28ebc2b8?q=80&w=400&h=400&auto=format&fit=crop" alt="Rome architecture" loading="lazy" decoding="async"><span>Rome</span></a>
    <a class="gl-13__card" href="#"><img src="https://images.unsplash.com/photo-1531891437562-4301cf35b7e4?q=80&w=400&h=400&auto=format&fit=crop" alt="Dubai towers" loading="lazy" decoding="async"><span>Dubai</span></a>
    <a class="gl-13__card" href="#"><img src="https://images.unsplash.com/photo-1474979266404-7eaacbcd87c5?q=80&w=400&h=400&auto=format&fit=crop" alt="Cairo skyline" loading="lazy" decoding="async"><span>Cairo</span></a>
  </div>
</section>
```
## CSS
```css
.gl-13,
.gl-13 *,
.gl-13 *::before,
.gl-13 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.gl-13 ::selection {
  background: oklch(0.7 0.17 60);
  color: #111;
}

.gl-13 {
  --accent: oklch(0.72 0.17 60);
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  padding: 40px 20px;
  background: #0f1013;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gl-13__grid {
  width: min(760px,100%);
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4,1fr);
}

.gl-13__card {
  position: relative;
  display: block;
  text-decoration: none;
  border-radius: 12px;
  overflow: hidden;
  background: #1a1c20;
  transition: transform .4s,opacity .4s,filter .4s;
}

.gl-13__card img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.gl-13__card span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 10px 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  background: linear-gradient(0deg,rgba(0,0,0,.75),transparent);
}

.gl-13__grid:has(.gl-13__card:hover) .gl-13__card:not(:hover),
.gl-13__grid:has(.gl-13__card:focus-visible) .gl-13__card:not(:focus-visible) {
  opacity: .4;
  filter: saturate(.35) brightness(.7);
}

.gl-13__card:hover,
.gl-13__card:focus-visible {
  transform: scale(1.06);
  z-index: 2;
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.7);
}

.gl-13__card:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .gl-13__grid {
    grid-template-columns: repeat(2,1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gl-13__card {
    transition: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — .grid:has(.card:hover) .card:not(:hover) dims every non-active card. */
```

How this works

The grid uses the relational selector: .grid:has(.card:hover) .card:not(:hover) drops the siblings' opacity and saturation while leaving the hovered card at full strength and a slight scale-up. A parallel rule with :has(.card:focus-visible) mirrors the effect for keyboard focus, so tabbing through the grid spotlights each card in turn.

Because :has() lets a parent react to a child's state, the whole 'dim the rest' behaviour that used to need JavaScript is now a couple of CSS rules.

Make it yours

  • Tune the dim with the siblings' opacity/filter — subtle fade vs strong blackout.
  • Add a blur to the dimmed cards for a depth-of-field spotlight.
  • Scale the active card more (or add a lift) for extra emphasis.
  • Apply the same :has() pattern to a nav or product row, not just images.

Gotchas — read before shipping

  • :has() is well-supported now but ancient browsers ignore it — the grid simply shows all cards normally, a safe fallback.
  • Always pair :hover with :focus-visible in the :has() so keyboard users get the spotlight too.
  • Don't dim so hard that dimmed content fails contrast if it still needs to be read.

Browser support

ChromeSafariFirefoxEdge
111+15.4+121+111+

Floor set by :has(), oklch() as this demo is written. The core technique itself goes back further — Chrome 105+.

:has() — Chrome 105+, Safari 15.4+, Firefox 121+. Unsupported engines show the grid with no dimming (graceful).

Techniques used in this demo

decoding="async"MDN ↗loading="lazy"MDN ↗aspect-ratioMDN ↗filterMDN ↗:has()MDN ↗grid-templateMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →