CSS Tip

Circular gallery of rounded images

In a previous post, we saw how to place images around a circle. We can use the same trick to create a circular gallery of images. Thanks to a combination of :nth-child and sibling-index(), we need fewer than 10 CSS declarations to correctly place up to 61 images.

CSS-only circular gallery of images

.container {
  display: inline-grid;
}
.container img {
  --s: 85px; /* image size */
  
  width: var(--s);
  grid-area: 1/1;
  border-radius: 50%;
}
/* up to 7 images (1 + 6)*/
.container img:nth-child(n + 2) {
  offset: circle(calc(1.15*var(--s))) calc(100%*sibling-index()/6) 0deg;
}
/* up to 19 images (1 + 6 + 12) */
.container img:nth-child(n + 8) {
  offset: circle(calc(2.2*var(--s))) calc(100%*sibling-index()/12 + 4.16%) 0deg;
}
/* up to 37 images (1 + 6 + 12 + 18) */
.container img:nth-child(n + 20) {
  offset: circle(calc(3.3*var(--s))) calc(100%*sibling-index()/18 + 2.77%) 0deg;
}
/* up to 61 images (1 + 6 + 12 + 18 + 24) */
.container img:nth-child(n + 38) {
  offset: circle(calc(4.4*var(--s))) calc(100%*sibling-index()/24 + 2.08%) 0deg;
}

⚠️ Limited support (Chrome only for now) ⚠️

See the Pen Circular gallery of images by Temani Afif (@t_afif) on CodePen.

And here is an animated version

See the Pen Untitled by Temani Afif (@t_afif) on CodePen.

More CSS Tips