Avatar Stack — Overlapping Avatars with Overflow Count

An avatar stack shows a small preview of a longer list of people — reviewers on a pull request, members of a team, attendees of an event — using overlapping circles so a handful of faces fit in the space of one. This snippet covers the overlap layout, the hover interaction, and the overflow count that appears once the list is longer than the space allows.

Overlap via negative margin, not absolute positioning

Each .avatar-item is a flex child with margin-left: -10px, pulling every avatar after the first partially behind its predecessor. This is simpler than absolutely positioning each avatar with calculated left offsets, and it means adding or removing people from the list requires no coordinate recalculation — flexbox handles the layout automatically regardless of how many avatars are present.

Stacking order and the white border

Because each avatar sits later in the DOM and overlaps the one before it, later avatars naturally render on top in normal stacking order. A 2.5px solid #fff border around every avatar is what visually separates overlapping circles from each other — without it, adjacent avatars of similar colors would blend into an indistinct blob at the overlap edge.

The hover lift

.avatar-item:hover { transform: translateY(-4px); z-index: 10 } lifts a hovered avatar up and above its neighbors. The z-index: 10 matters as much as the transform: without it, a raised avatar could still render underneath a later sibling in the stack, since normal DOM order would otherwise win. This small interaction is what makes a static stack feel like individual, distinguishable people rather than a flat decorative graphic.

The overflow badge

renderStack() slices the full people array to max visible avatars and, if any remain, appends one more circle styled as .avatar-more showing +N. This is the detail that lets a stack represent a list of any length in constant visual space — five avatars or five hundred people render in the same footprint, with the overflow badge doing the work of "and N others."

Native tooltips via the title attribute

Each avatar carries a title attribute with the person's full name (or, for the overflow badge, "N more"), which gives every avatar a free native browser tooltip on hover with zero extra markup or JavaScript. For richer tooltips — an avatar image, a role, an online-status dot — swap the title attribute for the tooltip snippet's positioned hover panel instead.

Color-coded initials as a fallback

Each person carries a fixed color alongside their initials, used as the avatar's background when no profile photo is available. Assigning a stable, deterministic color per person (rather than a random one on every render) matters for recognizability — the same person should always render in the same color across the app, which typically means deriving the color from a hash of the user's id rather than array position.

Sizing variants

The .stack-lg modifier scales up both the avatar size and the overlap amount (margin-left: -12px instead of -10px) together — the overlap should scale roughly proportionally with avatar size, or a larger stack either looks too spread out (overlap too small) or too cramped (overlap unchanged while avatars grew).

Real profile photos

Swap the colored initials div for an <img> with the same sizing and border rules, and add object-fit: cover so photos of varying aspect ratios crop consistently to the circle rather than stretching.

See also the avatar stack with tooltip for a variant using positioned custom tooltips instead of the native title attribute, and the avatar status list for a vertical list layout with online/away indicators.