Team Avatar Unfold
Overlapping team avatars spread apart so that individual members and names are easier to identify.
Overlapping team avatars spread apart so that individual members and names are easier to identify.
Live Demo
Hover over the element or use Tab to focus.
Source Code
Copy the HTML, CSS or JavaScript you need for your project.
<div class="tbx-1063" tabindex="0" role="group" aria-label="Three project team members">
<div class="tbx-1063__top"><strong>Project Team</strong><span>3 members</span></div>
<div class="tbx-1063__stack"><span class="tbx-1063__person"><i>AK</i><small>Akari</small></span><span class="tbx-1063__person"><i>RM</i><small>Rumi</small></span><span class="tbx-1063__person"><i>SO</i><small>Sora</small></span></div>
<p>Replace with photographs of your team.</p>
</div>
.tbx-1063{font:12px/1.4 system-ui,sans-serif;width:min(300px,100%);padding:18px 18px 13px;background:#fff;border:1px solid #d9e0e8;border-radius:11px;color:#2d4b5e;transition:border-color .26s,box-shadow .26s}
.tbx-1063__top{display:flex;justify-content:space-between;align-items:center;gap:10px}.tbx-1063__top strong{font-size:12px}.tbx-1063__top span{font-size:9px;color:#8799a7}.tbx-1063__stack{display:flex;align-items:center;height:95px;padding:8px 2px;gap:0;transition:gap .3s}.tbx-1063__person{display:grid;justify-items:center;gap:5px;margin-left:-13px;transition:margin .3s,transform .3s;position:relative}.tbx-1063__person:first-child{margin-left:0}.tbx-1063__person i{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-style:normal;color:#fff;font-size:13px;font-weight:800;border:3px solid white;background:linear-gradient(135deg,#6ca29d,#316875)}.tbx-1063__person:nth-child(2) i{background:linear-gradient(135deg,#d3a980,#ac6c60)}.tbx-1063__person:nth-child(3) i{background:linear-gradient(135deg,#8c9bd1,#556897)}.tbx-1063__person small{font-size:9px;opacity:0;transform:translateY(-5px);transition:opacity .3s,transform .3s;color:#526f7f}
.tbx-1063:is(:hover,:focus-visible){border-color:#9fc6c8;box-shadow:0 9px 22px #28495c16}.tbx-1063:is(:hover,:focus-visible) .tbx-1063__stack{gap:16px}.tbx-1063:is(:hover,:focus-visible) .tbx-1063__person{margin-left:0}.tbx-1063:is(:hover,:focus-visible) .tbx-1063__person small{opacity:1;transform:translateY(0)}.tbx-1063 p{font-size:9px;color:#81929d;margin:0}.tbx-1063:focus-visible{outline:3px solid #d0a574;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.tbx-1063,.tbx-1063__stack,.tbx-1063__person,.tbx-1063__person small{transition:none}}
How to Use
Insert the HTML and add the CSS to your stylesheet. Adjust colors and sizes and avoid class conflicts.
Use Case
Useful for team sections and community sections.
Technical Notes
Keep controls usable on touch devices. Test keyboard focus and reduced-motion preferences.
Mobile: Ensure the interactive content remains accessible without hover on touch devices.
Browser: Uses modern CSS. Check behavior in the browsers you support.
Reduced Motion: Check that prefers-reduced-motion is respected.