Avatar stack

Quick implementation

.avatar-stack {
  display: flex;
}

.avatar-stack img {
  --size: 3rem;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: 3px solid oklch(0.18 0.01 260);
  object-fit: cover;
  transition: transform 0.2s ease;
}

.avatar-stack img + img {
  margin-left: -0.75rem;
}

.avatar-stack img:hover {
  transform: scale(1.15);
  z-index: 10;
}

Prompt this to your LLM

Paste this into ChatGPT, Claude, or any code-generating model to scaffold the pattern instantly.

Create an avatar stack component with CSS. Use a flex
container holding circular img elements. Each avatar is
3rem square with border-radius: 50% and object-fit: cover.
Use a 3px solid border matching the page background
(oklch(0.18 0.01 260)) to create visual separation. Overlap
avatars by applying margin-left: -0.75rem on img + img.
On hover, scale the avatar to 1.15 and raise z-index to 10
so it appears above its neighbors. Make the size
customisable with a --size custom property.

Why this matters

Avatar stacks are a staple in collaborative UI: showing who is online, who contributed to a project, or group membership at a glance. This pattern is compact, instantly recognizable, and can be built with zero JavaScript. The overlapping effect communicates group association more strongly than separated avatars in a row.

The logic

A flex container lays the avatars out in a horizontal row. The img + img adjacent sibling selector applies a negative margin-left to every avatar after the first, pulling them leftward to overlap. The border, which matches the page background color, creates a visible ring that separates each avatar visually despite the overlap. On hover, transform: scale(1.15) enlarges the avatar and z-index: 10 lifts it above its siblings, since transform creates a new stacking context.

Accessibility & performance

Every <img> must have a meaningful alt attribute, such as the user's name. For large groups, consider adding a "+N more" indicator as text rather than relying solely on visual overlap. The hover scale effect is lightweight, but wrap the transition in @media (prefers-reduced-motion: no-preference) for users who are sensitive to motion. Using object-fit: cover ensures different-ratio images do not distort the circle shape, avoiding layout jank.