v141 · css

Image Gallery

A scrollable image gallery where the thumbnail strip uses :target-before (dimmed past), :target-current (highlighted active), and :target-after (faded future) — a pure CSS progress indicator with no JavaScript state.

Feature detection: checking…
Web platform gallery Click thumbnails to navigate
CSS Grid
Container Q
View Trans
Scroll Anim
Anchor Pos
Gap Deco

:target-before (past)

Thumbnails for already-viewed slides get a green tint — indicating the user has been there. Opacity drops slightly to de-emphasise.

:target-current (active)

The thumbnail for the current slide gets a bold border and scales up by 8% — clear focus indicator without JavaScript.

:target-after (future)

Thumbnails for unvisited slides fade to 40% opacity, giving a subtle "not yet seen" visual cue.

/* scroll-marker-group enables :target-before/current/after */
.thumbnail-strip { scroll-marker-group: before; }

/* Past slides */
.thumb-link:target-before .thumb-swatch {
  border-color: green;
  opacity: 0.7;
}

/* Active slide */
.thumb-link:target-current .thumb-swatch {
  border-color: black;
  transform: scale(1.08);
}

/* Unvisited slides */
.thumb-link:target-after .thumb-swatch {
  opacity: 0.4;
}

see also