Design team
8 members, 3 online now
AR
JP
MK
LS
+4
Team Card Avatar Stack Hover
A team card whose overlapping avatars spread apart and hop one after another, while the count chip fills. The spread uses the translate property, which leaves transform free for the hop.
Also known as: avatar group hover css, overlapping avatars spread, team card hover effect.
HTML
<article class="hfx-card-team-avatars">
<h3>Design team</h3>
<p>8 members, 3 online now</p>
<div class="hfx-card-team-avatars-row">
<span style="--i: 0">AR</span>
<span style="--i: 1">JP</span>
<span style="--i: 2">MK</span>
<span style="--i: 3">LS</span>
<span class="hfx-card-team-avatars-more" style="--i: 4">+4</span>
</div>
</article>CSS
.hfx-card-team-avatars {
--c: var(--hfx-color, #3b82f6);
font-size: var(--hfx-size, 16px);
width: 15em;
border-radius: 0.75em;
overflow: hidden;
background: #fff;
border: 1px solid color-mix(in srgb, #000 10%, transparent);
color: #1f2937;
font-family: system-ui, sans-serif;
box-sizing: border-box;
width: 14em;
padding: 1em 1.1em 1.1em;
transition: box-shadow 0.35s ease;}
.hfx-card-team-avatars:hover { box-shadow: 0 0.8em 1.3em -0.9em color-mix(in srgb, #000 30%, transparent); }
.hfx-card-team-avatars h3 {
margin: 0;
font-size: 1em;
font-weight: 600;
}
.hfx-card-team-avatars p {
margin: 0.15em 0 0;
font-size: 0.78em;
color: #6b7280;
}
.hfx-card-team-avatars-row {
display: flex;
margin-top: 0.85em;
padding-left: 0.2em;
}
.hfx-card-team-avatars-row span {
display: grid;
place-items: center;
width: 3.2em;
height: 3.2em;
margin-right: -1em;
border-radius: 50%;
background: linear-gradient(135deg, color-mix(in srgb, var(--c) 45%, #fff), var(--c));
box-shadow: 0 0 0 0.25em #fff;
color: #fff;
font-size: 0.68em;
font-weight: 700;
filter: hue-rotate(calc(var(--i) * 40deg));
transition: translate 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-card-team-avatars:hover .hfx-card-team-avatars-row span {
translate: calc(var(--i) * 0.85em) 0;
animation: hfx-card-team-avatars-hop 0.45s calc(0.15s + var(--i) * 60ms) cubic-bezier(0.3, 0.7, 0.4, 1) both;
}
.hfx-card-team-avatars-row .hfx-card-team-avatars-more {
background: color-mix(in srgb, var(--c) 14%, transparent);
color: var(--c);
filter: none;
transition: translate 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease, color 0.3s ease;
}
.hfx-card-team-avatars:hover .hfx-card-team-avatars-row .hfx-card-team-avatars-more {
background: var(--c);
color: #fff;
}
@keyframes hfx-card-team-avatars-hop {
0%, 100% { transform: none; }
45% { transform: translateY(-0.45em); }
}
@media (prefers-reduced-motion: reduce) {
.hfx-card-team-avatars, .hfx-card-team-avatars *, .hfx-card-team-avatars::before, .hfx-card-team-avatars::after, .hfx-card-team-avatars *::before, .hfx-card-team-avatars *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--hfx-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--hfx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.