Avatar Stack with Tooltip — Team Avatars HTML CSS

The overlapping row of avatars — used to show who's on a project, in a call, or assigned to a task — is everywhere, but the polished version does more than stack faces: each avatar lifts on hover and reveals a small card with the person's name, role, and status. This animated-tooltip avatar stack (popularized by Aceternity and seen across modern apps) is built here in plain HTML, CSS, and vanilla JavaScript, with a "+N more" overflow bubble for large groups.

Overlapping avatars with a lift on hover

The avatars overlap via a negative left margin so a group reads as a compact cluster rather than a long row — the standard "these people are together" motif. On hover, the hovered avatar lifts up (translateY(-6px)) and raises its z-index so it comes forward above its neighbors, giving a tactile sense of picking one out of the stack. Each avatar is an initials-on-gradient circle with a white ring, so no profile images are needed and the cluster stays visually distinct.

A hover card, not a bare tooltip

Instead of a one-line title attribute, each avatar reveals a styled tooltip card above it on hover — name in bold, role beneath, and a status line with a colored presence dot (online/away/offline). This richer hover content is what makes the pattern useful beyond decoration: hovering a face answers "who is this and are they around?" without leaving the page. The card animates in with opacity and transform (a slight rise and scale from its bottom origin) and has a little pointer arrow aimed at its avatar, so it reads as attached to the face it describes.

The "+N more" overflow

Showing twenty overlapping avatars is a mess, so the stack caps at a configurable MAX and collapses the rest into a gray "+N" bubble at the end — the universal overflow affordance. Hovering *that* bubble reveals a tooltip listing the names of everyone not shown, so the hidden members are still discoverable. This cap-and-overflow keeps the cluster compact for any group size while never fully hiding who's included.

Pure CSS hover, no JavaScript for the interaction

The lift and the tooltip reveal are entirely CSS :hover — the JavaScript only renders the stack from data. This means the interaction is instant, has no event-listener overhead, and degrades gracefully. The tooltip is positioned absolutely relative to each avatar and centered with a transform, so it stays anchored above its face regardless of the avatar's position in the row.

Data-driven and reusable

The stack renders from a PEOPLE array (name, role, status, gradient colors), with MAX controlling how many show before overflow — so it adapts to any group with a data edit. Swap the initials-gradient avatars for real photos by replacing the avatar background with an <img>, and the same component works for project members, call participants, task assignees, or any "these people are involved" display. The presence dot makes it double as a lightweight team-status indicator.