HTML
<div class="avt-stage">
<div class="avt-inner">
<div class="avt-t">
<div class="avt-circle" style="background:linear-gradient(135deg,#6028a0,#9060d0)">SL</div>
<div class="avt-tip">
<div class="avt-hero" style="background:linear-gradient(135deg,#4a1880,#8050c0)">
<div class="avt-photo" style="background:linear-gradient(135deg,#6028a0,#9060d0)">SL</div>
</div>
<div class="avt-body">
<div class="avt-name">Sarah Lindqvist</div>
<div class="avt-role">CEO · Executive</div>
<div class="avt-online"><span class="avt-online-dot" style="background:#22c55e"></span>Active now</div>
<div class="avt-bio">Former Stripe PM. Building the next layer of financial infrastructure for SMBs.</div>
<div class="avt-stats">
<div><div class="avt-stat-n">214</div><div class="avt-stat-l">Team</div></div>
<div><div class="avt-stat-n">8yr</div><div class="avt-stat-l">Tenure</div></div>
<div><div class="avt-stat-n">$1.2B</div><div class="avt-stat-l">Valuation</div></div>
</div>
</div>
<div class="avt-foot">
<div class="avt-btn">Message</div>
<div class="avt-btn avt-btn-prim">View Profile</div>
</div>
</div>
</div>
<div class="avt-t">
<div class="avt-circle" style="background:linear-gradient(135deg,#204080,#4070c0)">MW</div>
<div class="avt-tip">
<div class="avt-hero" style="background:linear-gradient(135deg,#102060,#3060a0)">
<div class="avt-photo" style="background:linear-gradient(135deg,#204080,#4070c0)">MW</div>
</div>
<div class="avt-body">
<div class="avt-name">Marcus Webb</div>
<div class="avt-role">CTO · Engineering</div>
<div class="avt-online"><span class="avt-online-dot" style="background:#22c55e"></span>Active now</div>
<div class="avt-bio">Ex-Google infra. Obsessed with distributed systems and making things fast at scale.</div>
<div class="avt-stats">
<div><div class="avt-stat-n">96</div><div class="avt-stat-l">Team</div></div>
<div><div class="avt-stat-n">5yr</div><div class="avt-stat-l">Tenure</div></div>
<div><div class="avt-stat-n">340</div><div class="avt-stat-l">PRs</div></div>
</div>
</div>
<div class="avt-foot">
<div class="avt-btn">Message</div>
<div class="avt-btn avt-btn-prim">View Profile</div>
</div>
</div>
</div>
<div class="avt-t">
<div class="avt-circle" style="background:linear-gradient(135deg,#0a6050,#1aa080)">ER</div>
<div class="avt-tip">
<div class="avt-hero" style="background:linear-gradient(135deg,#054030,#108060)">
<div class="avt-photo" style="background:linear-gradient(135deg,#0a6050,#1aa080)">ER</div>
</div>
<div class="avt-body">
<div class="avt-name">Elena Russo</div>
<div class="avt-role">CMO · Marketing</div>
<div class="avt-online"><span class="avt-online-dot" style="background:#f59e0b"></span>Away · 2h ago</div>
<div class="avt-bio">Brand strategist. Grew Notion's Europe presence 3×. London-based, GMT+1.</div>
<div class="avt-stats">
<div><div class="avt-stat-n">68</div><div class="avt-stat-l">Team</div></div>
<div><div class="avt-stat-n">3yr</div><div class="avt-stat-l">Tenure</div></div>
<div><div class="avt-stat-n">+84%</div><div class="avt-stat-l">YoY</div></div>
</div>
</div>
<div class="avt-foot">
<div class="avt-btn">Message</div>
<div class="avt-btn avt-btn-prim">View Profile</div>
</div>
</div>
</div>
<div class="avt-t">
<div class="avt-circle" style="background:linear-gradient(135deg,#802050,#c04080)">AP</div>
<div class="avt-tip">
<div class="avt-hero" style="background:linear-gradient(135deg,#601030,#a03060)">
<div class="avt-photo" style="background:linear-gradient(135deg,#802050,#c04080)">AP</div>
</div>
<div class="avt-body">
<div class="avt-name">Aisha Patel</div>
<div class="avt-role">Growth Lead · Marketing</div>
<div class="avt-online"><span class="avt-online-dot" style="background:#94a3b8"></span>Offline</div>
<div class="avt-bio">Data-driven growth. 0 → 100k users in 18 months. Runs the acquisition engine.</div>
<div class="avt-stats">
<div><div class="avt-stat-n">6</div><div class="avt-stat-l">Team</div></div>
<div><div class="avt-stat-n">1yr</div><div class="avt-stat-l">Tenure</div></div>
<div><div class="avt-stat-n">$1.2M</div><div class="avt-stat-l">Budget</div></div>
</div>
</div>
<div class="avt-foot">
<div class="avt-btn">Message</div>
<div class="avt-btn avt-btn-prim">View Profile</div>
</div>
</div>
</div>
</div>
</div> CSS
.avt-stage {
background: #ffffff;
/* Top room for the profile card (~280px tall) popping up from each
avatar circle. */
padding: 300px 28px 40px;
display: flex;
align-items: flex-end;
justify-content: center;
font-family: 'Inter', system-ui, sans-serif;
}
.avt-inner {
display: flex;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
}
.avt-t {
position: relative;
cursor: help;
}
.avt-circle {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
letter-spacing: 0.03em;
transition: transform .15s, box-shadow .15s;
}
.avt-t:hover .avt-circle {
transform: scale(1.1) translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
.avt-tip {
position: absolute;
bottom: calc(100% + 12px);
left: 50%;
transform: translateX(-50%) translateY(4px);
width: 240px;
background: #fff;
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, 0.07);
box-shadow:
0 12px 36px rgba(0, 0, 0, 0.12),
0 2px 8px rgba(0, 0, 0, 0.06);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity .25s,
transform .25s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear .25s;
z-index: 30;
overflow: hidden;
text-align: left;
}
.avt-t:hover .avt-tip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
transition-delay: 0s;
}
.avt-hero {
height: 56px;
position: relative;
}
.avt-photo {
width: 48px;
height: 48px;
border-radius: 50%;
border: 3px solid #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
position: absolute;
left: 14px;
bottom: -14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
color: rgba(255, 255, 255, 0.92);
}
.avt-body {
padding: 20px 14px 12px;
}
.avt-name {
font-size: 14px;
font-weight: 600;
color: #111;
}
.avt-role {
font-size: 10.5px;
color: #888;
margin-top: 2px;
}
.avt-online {
display: flex;
align-items: center;
gap: 5px;
font-size: 10px;
color: #888;
margin-top: 6px;
}
.avt-online-dot {
width: 6px;
height: 6px;
border-radius: 50%;
}
.avt-bio {
font-size: 11.5px;
color: #555;
margin-top: 8px;
line-height: 1.5;
}
.avt-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin-top: 12px;
padding-top: 11px;
border-top: 1px solid #f0f0f0;
text-align: center;
}
.avt-stat-n {
font-size: 15px;
font-weight: 700;
color: #111;
}
.avt-stat-l {
font-size: 8px;
color: #bbb;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 1px;
}
.avt-foot {
padding: 9px 14px;
border-top: 1px solid #f0f0f0;
display: flex;
gap: 6px;
}
.avt-btn {
flex: 1;
padding: 6px 0;
border-radius: 6px;
font-size: 11px;
font-weight: 500;
text-align: center;
border: 1px solid #e8e8e8;
color: #444;
background: #fafafa;
cursor: pointer;
}
.avt-btn-prim {
background: #111;
border-color: #111;
color: #fff;
}