22 CSS Image Galleries
11 / 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 Filmstrip Carousel Gallery

A low-profile horizontal strip of thumbnails that scrolls and snaps like a camera filmstrip, with sprocket-hole styling and momentum snapping to each frame. Built with CSS scroll-snap — no carousel library.

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-07" aria-label="Filmstrip carousel gallery">
  <div class="gl-07__strip" tabindex="0" role="region" aria-label="Scrollable filmstrip, use arrow keys">
    <figure class="gl-07__frame"><img src="https://images.unsplash.com/photo-1483058712412-4245e9b90334?q=80&w=500&h=340&auto=format&fit=crop" alt="Travel photo 1" loading="lazy" decoding="async"></figure>
    <figure class="gl-07__frame"><img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?q=80&w=500&h=340&auto=format&fit=crop" alt="Travel photo 2" loading="lazy" decoding="async"></figure>
    <figure class="gl-07__frame"><img src="https://images.unsplash.com/photo-1505142468610-359e7d316be0?q=80&w=500&h=340&auto=format&fit=crop" alt="Travel photo 3" loading="lazy" decoding="async"></figure>
    <figure class="gl-07__frame"><img src="https://images.unsplash.com/photo-1511499767150-a48a237f0083?q=80&w=500&h=340&auto=format&fit=crop" alt="Travel photo 4" loading="lazy" decoding="async"></figure>
    <figure class="gl-07__frame"><img src="https://images.unsplash.com/photo-1457369804613-52c61a468e7d?q=80&w=500&h=340&auto=format&fit=crop" alt="Travel photo 5" loading="lazy" decoding="async"></figure>
    <figure class="gl-07__frame"><img src="https://images.unsplash.com/photo-1439066615861-d1af74d74000?q=80&w=500&h=340&auto=format&fit=crop" alt="Travel photo 6" loading="lazy" decoding="async"></figure>
    <figure class="gl-07__frame"><img src="https://images.unsplash.com/photo-1450101499163-c8848c66ca85?q=80&w=500&h=340&auto=format&fit=crop" alt="Travel photo 7" loading="lazy" decoding="async"></figure>
    <figure class="gl-07__frame"><img src="https://images.unsplash.com/photo-1518495973542-4542c06a5843?q=80&w=500&h=340&auto=format&fit=crop" alt="Travel photo 8" loading="lazy" decoding="async"></figure>
  </div>
</section>
.gl-07,
.gl-07 *,
.gl-07 *::before,
.gl-07 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.gl-07 ::selection {
  background: oklch(0.7 0.15 90);
  color: #111;
}

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

.gl-07__strip {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 26px 20px;
  background: #0a0a0a;
  background-image: repeating-linear-gradient(90deg,#0a0a0a 0 14px,#1c1c1c 14px 22px,#0a0a0a 22px 36px), repeating-linear-gradient(90deg,#0a0a0a 0 14px,#1c1c1c 14px 22px,#0a0a0a 22px 36px);
  background-size: 36px 12px,36px 12px;
  background-position: 0 6px,0 calc(100% - 6px);
  background-repeat: repeat-x;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) #222;
}

.gl-07__strip::-webkit-scrollbar {
  height: 8px;
}

.gl-07__strip::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 8px;
}

.gl-07__frame {
  flex: 0 0 auto;
  width: min(340px,72vw);
  scroll-snap-align: center;
  border: 3px solid #e8e8e8;
  border-radius: 2px;
  background: #e8e8e8;
  overflow: hidden;
}

.gl-07__frame img {
  display: block;
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  filter: grayscale(.1) contrast(1.02);
  transition: filter .3s;
}

.gl-07__frame:hover img {
  filter: none;
}

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

@media (prefers-reduced-motion: reduce) {
  .gl-07__strip {
    scroll-behavior: auto;
  }

  .gl-07__frame img {
    transition: none;
  }
}
/* No JavaScript — scroll-snap-type:x mandatory snaps each film frame into place. */
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 Filmstrip Carousel Gallery
Source: https://codefronts.com/snippets/css-image-gallery/css-filmstrip-carousel-gallery/

A low-profile horizontal strip of thumbnails that scrolls and snaps like a camera filmstrip, with sprocket-hole styling and momentum snapping to each frame. Built with CSS scroll-snap — no carousel library.
## HTML
```html
<section class="gl-07" aria-label="Filmstrip carousel gallery">
  <div class="gl-07__strip" tabindex="0" role="region" aria-label="Scrollable filmstrip, use arrow keys">
    <figure class="gl-07__frame"><img src="https://images.unsplash.com/photo-1483058712412-4245e9b90334?q=80&w=500&h=340&auto=format&fit=crop" alt="Travel photo 1" loading="lazy" decoding="async"></figure>
    <figure class="gl-07__frame"><img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?q=80&w=500&h=340&auto=format&fit=crop" alt="Travel photo 2" loading="lazy" decoding="async"></figure>
    <figure class="gl-07__frame"><img src="https://images.unsplash.com/photo-1505142468610-359e7d316be0?q=80&w=500&h=340&auto=format&fit=crop" alt="Travel photo 3" loading="lazy" decoding="async"></figure>
    <figure class="gl-07__frame"><img src="https://images.unsplash.com/photo-1511499767150-a48a237f0083?q=80&w=500&h=340&auto=format&fit=crop" alt="Travel photo 4" loading="lazy" decoding="async"></figure>
    <figure class="gl-07__frame"><img src="https://images.unsplash.com/photo-1457369804613-52c61a468e7d?q=80&w=500&h=340&auto=format&fit=crop" alt="Travel photo 5" loading="lazy" decoding="async"></figure>
    <figure class="gl-07__frame"><img src="https://images.unsplash.com/photo-1439066615861-d1af74d74000?q=80&w=500&h=340&auto=format&fit=crop" alt="Travel photo 6" loading="lazy" decoding="async"></figure>
    <figure class="gl-07__frame"><img src="https://images.unsplash.com/photo-1450101499163-c8848c66ca85?q=80&w=500&h=340&auto=format&fit=crop" alt="Travel photo 7" loading="lazy" decoding="async"></figure>
    <figure class="gl-07__frame"><img src="https://images.unsplash.com/photo-1518495973542-4542c06a5843?q=80&w=500&h=340&auto=format&fit=crop" alt="Travel photo 8" loading="lazy" decoding="async"></figure>
  </div>
</section>
```
## CSS
```css
.gl-07,
.gl-07 *,
.gl-07 *::before,
.gl-07 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.gl-07 ::selection {
  background: oklch(0.7 0.15 90);
  color: #111;
}

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

.gl-07__strip {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 26px 20px;
  background: #0a0a0a;
  background-image: repeating-linear-gradient(90deg,#0a0a0a 0 14px,#1c1c1c 14px 22px,#0a0a0a 22px 36px), repeating-linear-gradient(90deg,#0a0a0a 0 14px,#1c1c1c 14px 22px,#0a0a0a 22px 36px);
  background-size: 36px 12px,36px 12px;
  background-position: 0 6px,0 calc(100% - 6px);
  background-repeat: repeat-x;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) #222;
}

.gl-07__strip::-webkit-scrollbar {
  height: 8px;
}

.gl-07__strip::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 8px;
}

.gl-07__frame {
  flex: 0 0 auto;
  width: min(340px,72vw);
  scroll-snap-align: center;
  border: 3px solid #e8e8e8;
  border-radius: 2px;
  background: #e8e8e8;
  overflow: hidden;
}

.gl-07__frame img {
  display: block;
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  filter: grayscale(.1) contrast(1.02);
  transition: filter .3s;
}

.gl-07__frame:hover img {
  filter: none;
}

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

@media (prefers-reduced-motion: reduce) {
  .gl-07__strip {
    scroll-behavior: auto;
  }

  .gl-07__frame img {
    transition: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — scroll-snap-type:x mandatory snaps each film frame into place. */
```

How this works

The strip is an overflow-x container with scroll-snap-type: x mandatory; each frame sets scroll-snap-align: center, so flicking or arrow-scrolling lands cleanly on a photo. Decorative 'sprocket holes' are painted top and bottom with a repeating gradient, and the frames themselves are fixed-width so the filmstrip reads as physical film.

The scroller has tabindex="0", a role="region" and an accessible label, so keyboard users can focus it and scroll with the arrow keys — the native, dependency-free way to make a snap carousel operable.

Make it yours

  • Set frame size with the item width; smaller frames show more of the strip.
  • Switch to scroll-snap-align: start for a left-aligned feed instead of centred.
  • Remove the sprocket-hole gradients for a clean modern thumbnail rail.
  • Add CSS scroll buttons with ::scroll-button in supporting browsers for click navigation.

Gotchas — read before shipping

  • Give the scroll container a visible focus style and tabindex so keyboard users can actually scroll it.
  • scroll-snap-type: mandatory can trap users mid-scroll on very tall content; for a horizontal strip it's ideal, but consider proximity for looser feeds.
  • Reserve frame size with fixed dimensions so lazy-loading images don't collapse the strip.

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 69+.

CSS scroll-snap — supported in all current browsers. ::scroll-button controls are progressive enhancement (Chrome 135+).

Techniques used in this demo

scroll-snap-typeMDN ↗scrollbar-gutter / -width / -colorMDN ↗decoding="async"MDN ↗loading="lazy"MDN ↗tabindexMDN ↗aspect-ratioMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →