# Hover Spread Avatar Group

> An overlapping avatar stack with a plus count chip where the avatars fan apart and lift one by one when you hover over them.

- Kind: Element
- Page: https://ownlyplans.com/bhaskar/hover-spread-avatar-group/
- Licence: CC BY 4.0 (reuse with credit)

## Code

`index.html`

```html
<div class="avg"><span style="--g:linear-gradient(135deg,#f472b6,#be123c)" title="Aria">A</span><span style="--g:linear-gradient(135deg,#fbbf24,#b45309)" title="Marcus">M</span><span style="--g:linear-gradient(135deg,#7dd3fc,#2563eb)" title="Leah">L</span><span style="--g:linear-gradient(135deg,#a78bfa,#4c1d95)" title="Dev">D</span><span class="more" title="4 more">+4</span></div>
```

`styles.css`

```css
.avg{display:flex;font-family:system-ui,-apple-system,sans-serif;padding:14px}.avg span{width:44px;height:44px;border-radius:50%;background:var(--g);color:#fff;font-weight:700;font-size:15px;display:grid;place-items:center;margin-left:-14px;border:2px solid #161616;transition:margin .35s cubic-bezier(.3,1.3,.5,1),transform .3s cubic-bezier(.3,1.5,.5,1);cursor:pointer}.avg span:first-child{margin-left:0}.avg span.more{background:#f3f3f3;color:#111;font-size:14px}.avg:hover span{margin-left:6px}.avg:hover span:first-child{margin-left:0}.avg span:hover{transform:translateY(-6px) scale(1.12);z-index:2}
```

---
Also available as JSON: https://ownlyplans.com/bhaskar/hover-spread-avatar-group/?format=json
MCP server: https://ownlyplans.com/mcp