Modern CSS for Responsive Avatar Lists (Part 2)

Ready for part two? Remember, last time we created a responsive list of overlapping avatar images with a cut-out between them.

We’re still working on a responsive avatar list, but now it’s a circular list.

This design is less common than the horizontal list, but it’s a good exercise to explore new CSS techniques.

Let’s start with a demo. Resize it to see how the images behave and hover to reveal a cool effect.

The demo currently works in Chrome and Edge, and will support other browsers as the sibling-index() and sibling-count() functions gain support. Track Firefox support in Ticket #1953973 and WebKit’s position in Issue #471.

We’ll use the same HTML structure and CSS base from Part 1: a list of images inside a container with mask-ed cutouts. This time, the positions will differ.