Profile Card
A rich hover-card for mentions, comments, and team rosters. Internal elements stagger in: hero glow, then portrait, then name and tagline, then stats — so the card unfolds rather than flicking on. Hover any avatar in the roster below.
Profile Card the 5th of 21 designs in the 21 CSS Tooltips collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="pc-stage">
<div class="pc-roster">
<div class="pc-head">
<span>Editorial Team · Vol XII</span>
<span>3 active</span>
</div>
<div class="pc-row">
<div class="pc-avatar-trigger">
<svg class="pc-avatar-svg" viewBox="0 0 100 100" aria-hidden="true">
<defs><linearGradient id="pc-av1" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#c1422c"/><stop offset="1" stop-color="#7a2415"/></linearGradient></defs>
<rect width="100" height="100" fill="url(#pc-av1)"/>
<text x="50" y="62" text-anchor="middle" font-family="Fraunces" font-size="38" font-style="italic" fill="#f7d18e">M</text>
</svg>
</div>
<div class="pc-id">
<div class="pc-name-row">Mira <em>Vance</em></div>
<div class="pc-handle">@miravance</div>
</div>
<div class="pc-role">Editor-in-Chief</div>
<div class="pc-status"></div>
<div class="pc-card">
<div class="pc-stagger">
<div class="pc-hero"></div>
<div class="pc-body">
<div class="pc-photo">
<svg viewBox="0 0 100 100" width="100%" height="100%"><rect width="100" height="100" fill="url(#pc-av1)"/><text x="50" y="62" text-anchor="middle" font-family="Fraunces" font-size="40" font-style="italic" fill="#f7d18e">M</text></svg>
</div>
<div class="pc-display-name">Mira <em>Vance</em></div>
<div class="pc-tagline">"Words first; everything else negotiated after."</div>
<div class="pc-stats">
<div><div class="pc-stat-num">142</div><div class="pc-stat-label">essays</div></div>
<div><div class="pc-stat-num">8.4k</div><div class="pc-stat-label">readers</div></div>
<div><div class="pc-stat-num">VII</div><div class="pc-stat-label">volumes</div></div>
</div>
</div>
</div>
</div>
</div>
<div class="pc-row">
<div class="pc-avatar-trigger">
<svg class="pc-avatar-svg" viewBox="0 0 100 100" aria-hidden="true">
<defs><linearGradient id="pc-av2" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#2d4a3e"/><stop offset="1" stop-color="#0d1f17"/></linearGradient></defs>
<rect width="100" height="100" fill="url(#pc-av2)"/>
<text x="50" y="62" text-anchor="middle" font-family="Fraunces" font-size="38" font-style="italic" fill="#f7d18e">A</text>
</svg>
</div>
<div class="pc-id">
<div class="pc-name-row">Adesh <em>Kothari</em></div>
<div class="pc-handle">@adesh.k</div>
</div>
<div class="pc-role">Design Director</div>
<div class="pc-status pc-status-away"></div>
<div class="pc-card">
<div class="pc-stagger">
<div class="pc-hero pc-hero-green"></div>
<div class="pc-body">
<div class="pc-photo">
<svg viewBox="0 0 100 100" width="100%" height="100%"><rect width="100" height="100" fill="url(#pc-av2)"/><text x="50" y="62" text-anchor="middle" font-family="Fraunces" font-size="40" font-style="italic" fill="#f7d18e">A</text></svg>
</div>
<div class="pc-display-name">Adesh <em>Kothari</em></div>
<div class="pc-tagline">"Restraint is also a flourish, if you commit to it."</div>
<div class="pc-stats">
<div><div class="pc-stat-num">96</div><div class="pc-stat-label">covers</div></div>
<div><div class="pc-stat-num">12</div><div class="pc-stat-label">awards</div></div>
<div><div class="pc-stat-num">04</div><div class="pc-stat-label">books</div></div>
</div>
</div>
</div>
</div>
</div>
<div class="pc-row">
<div class="pc-avatar-trigger">
<svg class="pc-avatar-svg" viewBox="0 0 100 100" aria-hidden="true">
<defs><linearGradient id="pc-av3" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#6b4226"/><stop offset="1" stop-color="#2a1810"/></linearGradient></defs>
<rect width="100" height="100" fill="url(#pc-av3)"/>
<text x="50" y="62" text-anchor="middle" font-family="Fraunces" font-size="38" font-style="italic" fill="#f7d18e">J</text>
</svg>
</div>
<div class="pc-id">
<div class="pc-name-row">June <em>Lacroix</em></div>
<div class="pc-handle">@junelacroix</div>
</div>
<div class="pc-role">Photo Editor</div>
<div class="pc-status"></div>
<div class="pc-card">
<div class="pc-stagger">
<div class="pc-hero pc-hero-amber"></div>
<div class="pc-body">
<div class="pc-photo">
<svg viewBox="0 0 100 100" width="100%" height="100%"><rect width="100" height="100" fill="url(#pc-av3)"/><text x="50" y="62" text-anchor="middle" font-family="Fraunces" font-size="40" font-style="italic" fill="#f7d18e">J</text></svg>
</div>
<div class="pc-display-name">June <em>Lacroix</em></div>
<div class="pc-tagline">"A photograph is the slowest sentence a magazine can run."</div>
<div class="pc-stats">
<div><div class="pc-stat-num">311</div><div class="pc-stat-label">shoots</div></div>
<div><div class="pc-stat-num">28</div><div class="pc-stat-label">cities</div></div>
<div><div class="pc-stat-num">VI</div><div class="pc-stat-label">years</div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> .pc-stage {
background: #14110d;
/* Generous bottom room — profile cards drop down from roster rows
and are ~360px tall, so the gallery card needs room below the
visible roster for them to render in full. */
padding: 36px 28px 400px;
display: flex;
align-items: flex-start;
justify-content: center;
font-family: 'Inter', system-ui, sans-serif;
}
.pc-roster {
width: 100%;
max-width: 560px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 2px;
}
.pc-head {
padding: 12px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(239, 236, 230, 0.5);
}
.pc-row {
padding: 14px 20px;
display: grid;
grid-template-columns: 40px 1fr auto auto;
align-items: center;
gap: 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
position: relative;
color: #efece6;
}
.pc-row:last-child { border-bottom: none; }
.pc-row:hover { background: rgba(255, 255, 255, 0.025); }
.pc-avatar-trigger {
width: 36px; height: 36px;
border-radius: 50%;
position: relative;
cursor: pointer;
flex-shrink: 0;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.pc-avatar-trigger:hover { transform: scale(1.08); }
.pc-avatar-svg {
width: 100%; height: 100%;
border-radius: 50%;
display: block;
}
.pc-name-row {
font-family: Georgia, serif;
font-size: 17px;
font-weight: 400;
}
.pc-name-row em { font-style: italic; color: #f7d18e; font-weight: 300; }
.pc-handle {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
color: rgba(239, 236, 230, 0.4);
margin-top: 2px;
}
.pc-role {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9.5px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(239, 236, 230, 0.5);
}
.pc-status {
width: 6px; height: 6px;
border-radius: 50%;
background: #6fcf97;
box-shadow: 0 0 8px rgba(111, 207, 151, 0.6);
}
.pc-status-away { background: #f7d18e; box-shadow: 0 0 8px rgba(247, 209, 142, 0.6); }
.pc-card {
position: absolute;
top: calc(100% + 12px);
left: 20px;
width: 320px;
background: linear-gradient(180deg, #1f1a14 0%, #14110d 100%);
border: 1px solid rgba(247, 209, 142, 0.15);
border-radius: 2px;
box-shadow:
0 25px 60px -16px rgba(0, 0, 0, 0.8),
0 0 0 1px rgba(247, 209, 142, 0.05),
inset 0 1px 0 rgba(247, 209, 142, 0.08);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition:
opacity 0.3s,
transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear 0.3s;
z-index: 30;
pointer-events: none;
overflow: hidden;
}
.pc-row:hover .pc-card,
.pc-avatar-trigger:hover .pc-card {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition-delay: 0s;
}
.pc-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, #f7d18e, transparent);
opacity: 0.5;
}
.pc-hero {
height: 76px;
background:
radial-gradient(circle at 30% 60%, rgba(193, 66, 44, 0.4), transparent 50%),
radial-gradient(circle at 80% 40%, rgba(247, 209, 142, 0.3), transparent 50%),
linear-gradient(135deg, #2a201a 0%, #14110d 100%);
position: relative;
overflow: hidden;
}
.pc-hero-green {
background:
radial-gradient(circle at 30% 60%, rgba(45, 74, 62, 0.5), transparent 50%),
radial-gradient(circle at 80% 40%, rgba(247, 209, 142, 0.3), transparent 50%),
linear-gradient(135deg, #1a2a23 0%, #14110d 100%);
}
.pc-hero-amber {
background:
radial-gradient(circle at 30% 60%, rgba(107, 66, 38, 0.5), transparent 50%),
radial-gradient(circle at 80% 40%, rgba(247, 209, 142, 0.25), transparent 50%),
linear-gradient(135deg, #2a201a 0%, #14110d 100%);
}
.pc-hero::after {
content: '';
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(45deg, transparent 0, transparent 6px, rgba(247, 209, 142, 0.04) 6px, rgba(247, 209, 142, 0.04) 7px);
}
.pc-body { padding: 0 18px 16px; position: relative; }
.pc-photo {
width: 56px; height: 56px;
border-radius: 50%;
margin-top: -28px;
border: 2px solid #14110d;
box-shadow: 0 0 0 1px rgba(247, 209, 142, 0.3);
position: relative;
overflow: hidden;
background: #2a201a;
}
.pc-display-name {
margin-top: 12px;
font-family: Georgia, serif;
font-size: 22px;
font-weight: 400;
line-height: 1.15;
color: #efece6;
}
.pc-display-name em { font-style: italic; color: #f7d18e; font-weight: 300; }
.pc-tagline {
margin-top: 6px;
font-family: Georgia, serif;
font-size: 13px;
font-style: italic;
color: rgba(239, 236, 230, 0.65);
line-height: 1.4;
}
.pc-stats {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.pc-stat-num {
font-family: Georgia, serif;
font-size: 18px;
font-weight: 500;
color: #f7d18e;
}
.pc-stat-label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 8.5px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(239, 236, 230, 0.4);
margin-top: 2px;
}
.pc-stagger > * {
opacity: 0;
transform: translateY(6px);
transition: opacity 0.4s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.pc-row:hover .pc-stagger > *,
.pc-avatar-trigger:hover .pc-stagger > * {
opacity: 1;
transform: translateY(0);
}
.pc-row:hover .pc-stagger > *:nth-child(1) { transition-delay: 0.05s; }
.pc-row:hover .pc-stagger > *:nth-child(2) { transition-delay: 0.18s; }