22 CSS Image Galleries
22 / 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 Scattered Photos Gallery

A casual collage of photos strewn across the surface at random angles; click any one and it springs to the centre, straightens and rises to the top of the pile — an interactive scatter board built with position:absolute and the :target selector.

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-22" id="gl-22" aria-label="Scattered photos collage">
  <a class="gl-22__reset" href="#gl-22" aria-label="Reset collage"></a>
  <div class="gl-22__board">
    <a class="gl-22__photo" id="gl-22-1" href="#gl-22-1" style="--rot:-8deg;top:8%;left:10%"><img src="https://images.unsplash.com/photo-1501554728187-ce583db33af7?q=80&w=400&h=300&auto=format&fit=crop" alt="Collage photo 1" loading="lazy" decoding="async"></a>
    <a class="gl-22__photo" id="gl-22-2" href="#gl-22-2" style="--rot:6deg;top:14%;left:38%"><img src="https://images.unsplash.com/photo-1589003077984-894e133dabab?q=80&w=400&h=300&auto=format&fit=crop" alt="Collage photo 2" loading="lazy" decoding="async"></a>
    <a class="gl-22__photo" id="gl-22-3" href="#gl-22-3" style="--rot:-5deg;top:10%;left:64%"><img src="https://images.unsplash.com/photo-1522312346375-d1a52e2b99b3?q=80&w=400&h=300&auto=format&fit=crop" alt="Collage photo 3" loading="lazy" decoding="async"></a>
    <a class="gl-22__photo" id="gl-22-4" href="#gl-22-4" style="--rot:9deg;top:46%;left:18%"><img src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?q=80&w=400&h=300&auto=format&fit=crop" alt="Collage photo 4" loading="lazy" decoding="async"></a>
    <a class="gl-22__photo" id="gl-22-5" href="#gl-22-5" style="--rot:-7deg;top:50%;left:48%"><img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?q=80&w=400&h=300&auto=format&fit=crop" alt="Collage photo 5" loading="lazy" decoding="async"></a>
    <a class="gl-22__photo" id="gl-22-6" href="#gl-22-6" style="--rot:4deg;top:44%;left:70%"><img src="https://images.unsplash.com/photo-1506126613408-eca07ce68773?q=80&w=400&h=300&auto=format&fit=crop" alt="Collage photo 6" loading="lazy" decoding="async"></a>
  </div>
  <p class="gl-22__hint">click a photo to bring it forward · click the background to reset</p>
</section>
.gl-22,
.gl-22 *,
.gl-22 *::before,
.gl-22 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.gl-22 ::selection {
  background: oklch(0.6 0.15 250);
  color: #fff;
}

.gl-22 {
  --accent: oklch(0.62 0.16 250);
  font-family: 'Segoe UI',system-ui,sans-serif;
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 40px 20px;
  background: #1c1a17;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.gl-22__reset {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.gl-22__board {
  position: relative;
  width: min(820px,100%);
  aspect-ratio: 16/10;
  z-index: 1;
}

.gl-22__photo {
  position: absolute;
  width: 26%;
  border-radius: 3px;
  overflow: hidden;
  padding: 8px 8px 8px;
  background: #fffdf8;
  text-decoration: none;
  transform: rotate(var(--rot));
  transform-origin: center;
  box-shadow: 0 12px 28px -12px rgba(0,0,0,.7);
  transition: transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .4s,z-index 0s;
}

.gl-22__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  background: #e0dacd;
}

.gl-22__photo:hover {
  transform: rotate(var(--rot)) scale(1.04);
  z-index: 6;
  box-shadow: 0 18px 36px -14px rgba(0,0,0,.75);
}

.gl-22__photo:target {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%,-50%) rotate(0deg) scale(1.5);
  z-index: 10;
  box-shadow: 0 30px 60px -18px rgba(0,0,0,.85);
}

.gl-22__photo:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.gl-22__hint {
  position: relative;
  z-index: 1;
  font: 11px ui-monospace,Menlo,monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8a8378;
}

@media (max-width: 560px) {
  .gl-22__photo {
    width: 38%;
  }

  .gl-22__photo:target {
    transform: translate(-50%,-50%) rotate(0) scale(1.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gl-22__photo {
    transition: none;
  }
}
/* No JavaScript — :target lifts the clicked photo to centre; a full-board link resets. */
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 Scattered Photos Gallery
Source: https://codefronts.com/snippets/css-image-gallery/css-scattered-photos-gallery/

A casual collage of photos strewn across the surface at random angles; click any one and it springs to the centre, straightens and rises to the top of the pile — an interactive scatter board built with position:absolute and the :target selector.
## HTML
```html
<section class="gl-22" id="gl-22" aria-label="Scattered photos collage">
  <a class="gl-22__reset" href="#gl-22" aria-label="Reset collage"></a>
  <div class="gl-22__board">
    <a class="gl-22__photo" id="gl-22-1" href="#gl-22-1" style="--rot:-8deg;top:8%;left:10%"><img src="https://images.unsplash.com/photo-1501554728187-ce583db33af7?q=80&w=400&h=300&auto=format&fit=crop" alt="Collage photo 1" loading="lazy" decoding="async"></a>
    <a class="gl-22__photo" id="gl-22-2" href="#gl-22-2" style="--rot:6deg;top:14%;left:38%"><img src="https://images.unsplash.com/photo-1589003077984-894e133dabab?q=80&w=400&h=300&auto=format&fit=crop" alt="Collage photo 2" loading="lazy" decoding="async"></a>
    <a class="gl-22__photo" id="gl-22-3" href="#gl-22-3" style="--rot:-5deg;top:10%;left:64%"><img src="https://images.unsplash.com/photo-1522312346375-d1a52e2b99b3?q=80&w=400&h=300&auto=format&fit=crop" alt="Collage photo 3" loading="lazy" decoding="async"></a>
    <a class="gl-22__photo" id="gl-22-4" href="#gl-22-4" style="--rot:9deg;top:46%;left:18%"><img src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?q=80&w=400&h=300&auto=format&fit=crop" alt="Collage photo 4" loading="lazy" decoding="async"></a>
    <a class="gl-22__photo" id="gl-22-5" href="#gl-22-5" style="--rot:-7deg;top:50%;left:48%"><img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?q=80&w=400&h=300&auto=format&fit=crop" alt="Collage photo 5" loading="lazy" decoding="async"></a>
    <a class="gl-22__photo" id="gl-22-6" href="#gl-22-6" style="--rot:4deg;top:44%;left:70%"><img src="https://images.unsplash.com/photo-1506126613408-eca07ce68773?q=80&w=400&h=300&auto=format&fit=crop" alt="Collage photo 6" loading="lazy" decoding="async"></a>
  </div>
  <p class="gl-22__hint">click a photo to bring it forward · click the background to reset</p>
</section>
```
## CSS
```css
.gl-22,
.gl-22 *,
.gl-22 *::before,
.gl-22 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.gl-22 ::selection {
  background: oklch(0.6 0.15 250);
  color: #fff;
}

.gl-22 {
  --accent: oklch(0.62 0.16 250);
  font-family: 'Segoe UI',system-ui,sans-serif;
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 40px 20px;
  background: #1c1a17;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.gl-22__reset {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.gl-22__board {
  position: relative;
  width: min(820px,100%);
  aspect-ratio: 16/10;
  z-index: 1;
}

.gl-22__photo {
  position: absolute;
  width: 26%;
  border-radius: 3px;
  overflow: hidden;
  padding: 8px 8px 8px;
  background: #fffdf8;
  text-decoration: none;
  transform: rotate(var(--rot));
  transform-origin: center;
  box-shadow: 0 12px 28px -12px rgba(0,0,0,.7);
  transition: transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .4s,z-index 0s;
}

.gl-22__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  background: #e0dacd;
}

.gl-22__photo:hover {
  transform: rotate(var(--rot)) scale(1.04);
  z-index: 6;
  box-shadow: 0 18px 36px -14px rgba(0,0,0,.75);
}

.gl-22__photo:target {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%,-50%) rotate(0deg) scale(1.5);
  z-index: 10;
  box-shadow: 0 30px 60px -18px rgba(0,0,0,.85);
}

.gl-22__photo:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.gl-22__hint {
  position: relative;
  z-index: 1;
  font: 11px ui-monospace,Menlo,monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8a8378;
}

@media (max-width: 560px) {
  .gl-22__photo {
    width: 38%;
  }

  .gl-22__photo:target {
    transform: translate(-50%,-50%) rotate(0) scale(1.3);
  }
}

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

## JavaScript
```js
/* No JavaScript — :target lifts the clicked photo to centre; a full-board link resets. */
```

How this works

Photos are absolutely positioned across the board at hand-tuned coordinates and rotations, overlapping like a physical pile. Each is an anchor pointing at its own id; when it becomes the :target, a rule lifts it to the centre (translate to mid-board), straightens it, scales it up and raises its z-index above everything else.

Clicking another photo re-targets and moves the spotlight; a full-board 'reset' link returns to the scattered state. It's all :target — deep-linkable, keyboard-operable and script-free.

Make it yours

  • Reposition photos by editing each item's top/left/--rot.
  • Change the focused pose (scale, angle, position) in the :target rule.
  • Add more photos — each just needs a unique id and anchor.
  • Swap the flat scatter for a fanned arc by patterning the coordinates.

Gotchas — read before shipping

  • Give the focused :target the highest z-index so it clears the rest of the pile.
  • Keep every photo a real focusable <a> so the board is keyboard-navigable, not mouse-only.
  • Provide a reset/close target so users can return to the scattered view.

Browser support

ChromeSafariFirefoxEdge
111+15.4+113+111+

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

:target + absolute positioning + transform — supported everywhere for years.

Techniques used in this demo

decoding="async"MDN ↗loading="lazy"MDN ↗aspect-ratioMDN ↗:focus-visibleMDN ↗box-shadowMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →