Creating a Responsive Avatar List with Modern CSS (Part 1)

A series of overlapping circular images is a timeless web design trend.

Curious about what new feature we’re introducing? It’s been done many times before.

You’re right. The core concept isn’t new, but the innovation lies in its responsiveness. We’ll explore how to dynamically adjust the overlap between images to fit within their container, and we’ll add some cool animations!

Here’s a demonstration of what we’re building. Resize the window and hover over the images to see their behavior. And yes, the gap between images is transparent!

The following demo is currently limited to Chrome and Edge, but will work in other browsers as the sibling-index() and sibling-count() functions gain broader support. You can track Firefox support in Ticket #1953973 and WebKit’s position in Issue #471.

We’ll delve deeper into this in a second article. For now, let’s recreate this demo!

Responsive List of Avatars Using Modern CSS

1. Horizontal Lists (You are here!)
2. Circular Lists (Coming this week)

Post Tags: #1#animations#articles#Avatars#browsers#building#chrome#css#demo#design#design trend#done#edge#Feature#firefox#functions#images#index#innovation#it#lists#mask#Other#position#responsive#series#support#web#week#work