CSS Tip

Responsive List of Stacked/Overlapping Images

Using modern CSS and a few lines of code to create a responsive list of stacked images. The overlap between the images will adjust automatically based on the number of items and the available space. No hardcoded values, no magic numbers, and the gap is transparent!

CSS-only responsive stacked images

.container {
  --s: 120px; /* image size*/
  --g: 12px;  /* the gap */ 
  
  display: flex;
  container-type: inline-size;
}
.container img {
  width: var(--s);
  border-radius: 50%;
  --_m: calc((100cqw - sibling-count()*var(--s))/(sibling-count() - 1));
  margin-right: var(--_m);
  mask: radial-gradient(50% 50% at var(--_r,calc(150% + var(--_m))),
    #0000 calc(100% - 1px + var(--g)),#000 calc(100% + var(--g)));
}
.container.reverse img {
  --_r:calc(-50% - var(--_m));
}
.container img:last-child {
  margin: 0;
}
.container:not(.reverse) img:last-child,
.container.reverse img:first-child {
  mask: none;
}

Resize the demo below to see how the image behaves:

See the Pen Responsive Stacked/Overlapping images by Temani Afif (@t_afif) on CodePen.

More CSS Tips