21 CSS Tooltips05 / 21

Pure CSSMIT licensed

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.

Published

Live Demo
Try it

The code

<div class="tp-05">
  <div class="tp-05__roster">
    <div class="tp-05__head">
      <span>Editorial Team · Vol XII</span>
      <span>3 active</span>
    </div>
    <div class="tp-05__row">
      <div class="tp-05__avatar-trigger">
        <svg class="tp-05__avatar-svg" viewBox="0 0 100 100" aria-hidden="true">
          <defs><linearGradient id="tp-05__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(#tp-05__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="tp-05__id">
        <div class="tp-05__name-row">Mira <em>Vance</em></div>
        <div class="tp-05__handle">@miravance</div>
      </div>
      <div class="tp-05__role">Editor-in-Chief</div>
      <div class="tp-05__status"></div>
      <div class="tp-05__card">
        <div class="tp-05__stagger">
          <div class="tp-05__hero"></div>
          <div class="tp-05__body">
            <div class="tp-05__photo">
              <svg viewBox="0 0 100 100" width="100%" height="100%"><rect width="100" height="100" fill="url(#tp-05__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="tp-05__display-name">Mira <em>Vance</em></div>
            <div class="tp-05__tagline">"Words first; everything else negotiated after."</div>
            <div class="tp-05__stats">
              <div><div class="tp-05__stat-num">142</div><div class="tp-05__stat-label">essays</div></div>
              <div><div class="tp-05__stat-num">8.4k</div><div class="tp-05__stat-label">readers</div></div>
              <div><div class="tp-05__stat-num">VII</div><div class="tp-05__stat-label">volumes</div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tp-05__row">
      <div class="tp-05__avatar-trigger">
        <svg class="tp-05__avatar-svg" viewBox="0 0 100 100" aria-hidden="true">
          <defs><linearGradient id="tp-05__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(#tp-05__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="tp-05__id">
        <div class="tp-05__name-row">Adesh <em>Kothari</em></div>
        <div class="tp-05__handle">@adesh.k</div>
      </div>
      <div class="tp-05__role">Design Director</div>
      <div class="tp-05__status tp-05__status-away"></div>
      <div class="tp-05__card">
        <div class="tp-05__stagger">
          <div class="tp-05__hero tp-05__hero-green"></div>
          <div class="tp-05__body">
            <div class="tp-05__photo">
              <svg viewBox="0 0 100 100" width="100%" height="100%"><rect width="100" height="100" fill="url(#tp-05__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="tp-05__display-name">Adesh <em>Kothari</em></div>
            <div class="tp-05__tagline">"Restraint is also a flourish, if you commit to it."</div>
            <div class="tp-05__stats">
              <div><div class="tp-05__stat-num">96</div><div class="tp-05__stat-label">covers</div></div>
              <div><div class="tp-05__stat-num">12</div><div class="tp-05__stat-label">awards</div></div>
              <div><div class="tp-05__stat-num">04</div><div class="tp-05__stat-label">books</div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tp-05__row">
      <div class="tp-05__avatar-trigger">
        <svg class="tp-05__avatar-svg" viewBox="0 0 100 100" aria-hidden="true">
          <defs><linearGradient id="tp-05__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(#tp-05__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="tp-05__id">
        <div class="tp-05__name-row">June <em>Lacroix</em></div>
        <div class="tp-05__handle">@junelacroix</div>
      </div>
      <div class="tp-05__role">Photo Editor</div>
      <div class="tp-05__status"></div>
      <div class="tp-05__card">
        <div class="tp-05__stagger">
          <div class="tp-05__hero tp-05__hero-amber"></div>
          <div class="tp-05__body">
            <div class="tp-05__photo">
              <svg viewBox="0 0 100 100" width="100%" height="100%"><rect width="100" height="100" fill="url(#tp-05__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="tp-05__display-name">June <em>Lacroix</em></div>
            <div class="tp-05__tagline">"A photograph is the slowest sentence a magazine can run."</div>
            <div class="tp-05__stats">
              <div><div class="tp-05__stat-num">311</div><div class="tp-05__stat-label">shoots</div></div>
              <div><div class="tp-05__stat-num">28</div><div class="tp-05__stat-label">cities</div></div>
              <div><div class="tp-05__stat-num">VI</div><div class="tp-05__stat-label">years</div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
.tp-05 {
  width: 100%;
  min-height: 100vh;
  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;
}

.tp-05__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;
}

.tp-05__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);
}

.tp-05__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;
}

.tp-05__row:last-child {
  border-bottom: none;
}

.tp-05__row:hover {
  background: rgba(255, 255, 255, 0.025);
}

.tp-05__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);
}

.tp-05__avatar-trigger:hover {
  transform: scale(1.08);
}

.tp-05__avatar-svg {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
}

.tp-05__name-row {
  font-family: Georgia, serif;
  font-size: 17px;
  font-weight: 400;
}

.tp-05__name-row em {
  font-style: italic;
  color: #f7d18e;
  font-weight: 300;
}

.tp-05__handle {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: rgba(239, 236, 230, 0.4);
  margin-top: 2px;
}

.tp-05__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);
}

.tp-05__status {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6fcf97;
  box-shadow: 0 0 8px rgba(111, 207, 151, 0.6);
}

.tp-05__status-away {
  background: #f7d18e;
  box-shadow: 0 0 8px rgba(247, 209, 142, 0.6);
}

.tp-05__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;
}

.tp-05__row:hover .tp-05__card,
.tp-05__avatar-trigger:hover .tp-05__card {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.tp-05__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #f7d18e, transparent);
  opacity: 0.5;
}

.tp-05__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;
}

.tp-05__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%);
}

.tp-05__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%);
}

.tp-05__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);
}

.tp-05__body {
  padding: 0 18px 16px;
  position: relative;
}

.tp-05__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;
}

.tp-05__display-name {
  margin-top: 12px;
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
  color: #efece6;
}

.tp-05__display-name em {
  font-style: italic;
  color: #f7d18e;
  font-weight: 300;
}

.tp-05__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;
}

.tp-05__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;
}

.tp-05__stat-num {
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  color: #f7d18e;
}

.tp-05__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;
}

.tp-05__stagger > * {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.tp-05__row:hover .tp-05__stagger > *,
.tp-05__avatar-trigger:hover .tp-05__stagger > * {
  opacity: 1;
  transform: translateY(0);
}

.tp-05__row:hover .tp-05__stagger > *:nth-child(1) {
  transition-delay: 0.05s;
}

.tp-05__row:hover .tp-05__stagger > *:nth-child(2) {
  transition-delay: 0.18s;
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Tooltip from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Profile Card
Source: https://codefronts.com/snippets/css-tooltips/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.
## HTML
```html
<div class="tp-05">
  <div class="tp-05__roster">
    <div class="tp-05__head">
      <span>Editorial Team · Vol XII</span>
      <span>3 active</span>
    </div>
    <div class="tp-05__row">
      <div class="tp-05__avatar-trigger">
        <svg class="tp-05__avatar-svg" viewBox="0 0 100 100" aria-hidden="true">
          <defs><linearGradient id="tp-05__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(#tp-05__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="tp-05__id">
        <div class="tp-05__name-row">Mira <em>Vance</em></div>
        <div class="tp-05__handle">@miravance</div>
      </div>
      <div class="tp-05__role">Editor-in-Chief</div>
      <div class="tp-05__status"></div>
      <div class="tp-05__card">
        <div class="tp-05__stagger">
          <div class="tp-05__hero"></div>
          <div class="tp-05__body">
            <div class="tp-05__photo">
              <svg viewBox="0 0 100 100" width="100%" height="100%"><rect width="100" height="100" fill="url(#tp-05__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="tp-05__display-name">Mira <em>Vance</em></div>
            <div class="tp-05__tagline">"Words first; everything else negotiated after."</div>
            <div class="tp-05__stats">
              <div><div class="tp-05__stat-num">142</div><div class="tp-05__stat-label">essays</div></div>
              <div><div class="tp-05__stat-num">8.4k</div><div class="tp-05__stat-label">readers</div></div>
              <div><div class="tp-05__stat-num">VII</div><div class="tp-05__stat-label">volumes</div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tp-05__row">
      <div class="tp-05__avatar-trigger">
        <svg class="tp-05__avatar-svg" viewBox="0 0 100 100" aria-hidden="true">
          <defs><linearGradient id="tp-05__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(#tp-05__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="tp-05__id">
        <div class="tp-05__name-row">Adesh <em>Kothari</em></div>
        <div class="tp-05__handle">@adesh.k</div>
      </div>
      <div class="tp-05__role">Design Director</div>
      <div class="tp-05__status tp-05__status-away"></div>
      <div class="tp-05__card">
        <div class="tp-05__stagger">
          <div class="tp-05__hero tp-05__hero-green"></div>
          <div class="tp-05__body">
            <div class="tp-05__photo">
              <svg viewBox="0 0 100 100" width="100%" height="100%"><rect width="100" height="100" fill="url(#tp-05__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="tp-05__display-name">Adesh <em>Kothari</em></div>
            <div class="tp-05__tagline">"Restraint is also a flourish, if you commit to it."</div>
            <div class="tp-05__stats">
              <div><div class="tp-05__stat-num">96</div><div class="tp-05__stat-label">covers</div></div>
              <div><div class="tp-05__stat-num">12</div><div class="tp-05__stat-label">awards</div></div>
              <div><div class="tp-05__stat-num">04</div><div class="tp-05__stat-label">books</div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tp-05__row">
      <div class="tp-05__avatar-trigger">
        <svg class="tp-05__avatar-svg" viewBox="0 0 100 100" aria-hidden="true">
          <defs><linearGradient id="tp-05__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(#tp-05__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="tp-05__id">
        <div class="tp-05__name-row">June <em>Lacroix</em></div>
        <div class="tp-05__handle">@junelacroix</div>
      </div>
      <div class="tp-05__role">Photo Editor</div>
      <div class="tp-05__status"></div>
      <div class="tp-05__card">
        <div class="tp-05__stagger">
          <div class="tp-05__hero tp-05__hero-amber"></div>
          <div class="tp-05__body">
            <div class="tp-05__photo">
              <svg viewBox="0 0 100 100" width="100%" height="100%"><rect width="100" height="100" fill="url(#tp-05__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="tp-05__display-name">June <em>Lacroix</em></div>
            <div class="tp-05__tagline">"A photograph is the slowest sentence a magazine can run."</div>
            <div class="tp-05__stats">
              <div><div class="tp-05__stat-num">311</div><div class="tp-05__stat-label">shoots</div></div>
              <div><div class="tp-05__stat-num">28</div><div class="tp-05__stat-label">cities</div></div>
              <div><div class="tp-05__stat-num">VI</div><div class="tp-05__stat-label">years</div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```
## CSS
```css
.tp-05 {
  width: 100%;
  min-height: 100vh;
  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;
}

.tp-05__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;
}

.tp-05__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);
}

.tp-05__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;
}

.tp-05__row:last-child {
  border-bottom: none;
}

.tp-05__row:hover {
  background: rgba(255, 255, 255, 0.025);
}

.tp-05__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);
}

.tp-05__avatar-trigger:hover {
  transform: scale(1.08);
}

.tp-05__avatar-svg {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
}

.tp-05__name-row {
  font-family: Georgia, serif;
  font-size: 17px;
  font-weight: 400;
}

.tp-05__name-row em {
  font-style: italic;
  color: #f7d18e;
  font-weight: 300;
}

.tp-05__handle {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: rgba(239, 236, 230, 0.4);
  margin-top: 2px;
}

.tp-05__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);
}

.tp-05__status {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6fcf97;
  box-shadow: 0 0 8px rgba(111, 207, 151, 0.6);
}

.tp-05__status-away {
  background: #f7d18e;
  box-shadow: 0 0 8px rgba(247, 209, 142, 0.6);
}

.tp-05__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;
}

.tp-05__row:hover .tp-05__card,
.tp-05__avatar-trigger:hover .tp-05__card {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.tp-05__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #f7d18e, transparent);
  opacity: 0.5;
}

.tp-05__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;
}

.tp-05__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%);
}

.tp-05__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%);
}

.tp-05__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);
}

.tp-05__body {
  padding: 0 18px 16px;
  position: relative;
}

.tp-05__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;
}

.tp-05__display-name {
  margin-top: 12px;
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
  color: #efece6;
}

.tp-05__display-name em {
  font-style: italic;
  color: #f7d18e;
  font-weight: 300;
}

.tp-05__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;
}

.tp-05__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;
}

.tp-05__stat-num {
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  color: #f7d18e;
}

.tp-05__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;
}

.tp-05__stagger > * {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.tp-05__row:hover .tp-05__stagger > *,
.tp-05__avatar-trigger:hover .tp-05__stagger > * {
  opacity: 1;
  transform: translateY(0);
}

.tp-05__row:hover .tp-05__stagger > *:nth-child(1) {
  transition-delay: 0.05s;
}

.tp-05__row:hover .tp-05__stagger > *:nth-child(2) {
  transition-delay: 0.18s;
}
```

How this works

The stage is a magazine-masthead roster on a rich almost-black ground (#14110d). .tp-05__roster is a 560px 2px-radius panel with a 2% white tint and a hairline gold-cream border (rgba(247, 209, 142, 0.15)). Above it, a monospaced .tp-05__head prints Editorial Team, Vol XII in tracked small caps. Each roster line is a four-column .tp-05__row grid (40px 1fr auto auto) holding a 36px .tp-05__avatar-trigger, a Georgia name with an italic surname in #f7d18e, a monospaced role, and a 6px .tp-05__status dot (green #6fcf97 or amber #f7d18e). Hovering the avatar scales it 1.08 on a cubic-bezier(0.22, 1, 0.36, 1) ease.

The hover-card is .tp-05__card, a 320px panel absolutely positioned against the row at calc(100% + 12px). It carries a vertical gradient (#1f1a14 to #14110d), a triple-stack shadow with a 1px cream inner rim, and a 1px shimmer strip on ::before as a gilt edge — a Twitter/X and Read.cv idiom refined for a masthead register. The card is anchored to the row rather than the avatar (.tp-05__row:hover), so any part of the line surfaces it without hunt-and-peck. A 76px .tp-05__hero block paints two radial gradients over a linear base, and a repeating 45-degree hairline overlay adds a press-plate texture.

The staggered reveal lives inside .tp-05__stagger: every direct child starts at opacity: 0; transform: translateY(6px) and transitions on 400ms opacity plus 500ms transform. On :hover, nth-child transition-delays fire in order — hero glow at 50ms, portrait and body at 180ms — so the card unfolds rather than flicking in. The portrait is a 56px .tp-05__photo with margin-top: -28px breaking the hero's baseline, a 2px canvas-colored border and a 1px cream ring; below it, a 22px Georgia display name with italic surname, an italic tagline at 13px, and a three-column stat grid pairing Georgia numerals with monospaced small-caps labels.

Make it yours

  • For a Discord-flavored variant flip the ground to #2b2d31, panel tint to 4% white, gold-cream accents (#f7d18e) to Discord's #5865f2, and drop the hero's texture overlay. The stagger timing and card anatomy stay intact; only the palette register changes.
  • Swap Georgia for Fraunces (already used in the SVG avatars) so the display name inherits its optical-size axis; set font-variation-settings: "opsz" 72 on .tp-05__display-name and opsz 14 on the roster name-row for correct grade.
  • Radius is a deliberate 2px on roster and card — a sharp masthead corner rather than a chat-app pill. For a Read.cv softer feel raise to 12px on the card and 8px on the roster; for Twitter/X hover-card use 16px on the card only.
  • Light editorial-daily variant: ground to #f5efe5, roster to #ffffff, card to #faf5ea, borders to rgba(20, 17, 13, 0.08), name to #1a140d, accents to #8a2c1c. Hero radials recompose to a warm ivory glow — palette recolor only, no anatomy changes.
  • Tailwind arbitrary-value map: bg-[#14110d] rounded-[2px] border border-[#f7d18e]/15 for the panel; grid grid-cols-[40px_1fr_auto_auto] gap-[14px] for rows; w-[36px] h-[36px] rounded-full hover:scale-[1.08] for the avatar; absolute [inset-block-start:calc(100%+12px)] left-[20px] w-[320px] opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 for the card; per-child [transition-delay:50ms], [transition-delay:180ms] for the stagger.

Gotchas — read before shipping

  • The hover-card is a rich composite of name, tagline and stats — screen readers need it as a semantic disclosure, not decoration. Wrap .tp-05__avatar-trigger in a real button element with aria-expanded="false" and aria-controls pointing at the card's id; toggle aria-expanded on click and treat the CSS hover as progressive enhancement. Otherwise SC 4.1.2 Name, Role, Value fails.
  • SC 2.1.1 Keyboard: the roster row hover reveal excludes keyboard users entirely. Mirror .tp-05__row:hover .tp-05__card with .tp-05__row:focus-within .tp-05__card, make the avatar-trigger a focusable button, and manage focus back to the trigger on Escape. Popover API with popovertarget handles all of this natively where supported.
  • SC 2.3.3 Animation from Interactions applies — the staggered reveal (400ms opacity, 500ms transform) is an interaction animation and must respect @media (prefers-reduced-motion: reduce). Under that query, drop the stagger to opacity 0.1s with no transform and no per-child delay so vestibular users see the card without motion.
  • SC 1.4.3 Contrast on the tagline (rgba(239, 236, 230, 0.65) on #1f1a14) resolves near 4.7:1 — passing at 13px body but the italic Georgia glyphs shave perceived weight. Raise to 0.8 alpha or bump size to 14px to stay above 4.5:1 with margin; verify with axe-core against the actual gradient background, not the solid stop.
  • The card anchors at calc(100% + 12px) with left: 20px. On the last roster row the 360px card overflows the panel, and production overflow: hidden ancestors will clip it. Flip the last row to bottom: calc(100% + 12px), or promote the card to a Popover-API layer (Chrome 114+, Safari 17+, Firefox 125+) to escape stacking contexts.
  • The three hero variants (.tp-05__hero, .tp-05__hero-green, .tp-05__hero-amber) plus the repeating overlay compose 4 paint layers per card. On low-end Android, painting 3 hero variants in a scrolling roster can spike LCP 100-200ms above the fold. Flatten to a pre-composited gradient image if telemetry shows regression.

Browser support

ChromeSafariFirefoxEdge
88+14+89+88+

the base demo is pure CSS transitions and grid; migrating focus management to the Popover API for keyboard parity requires Chrome 114+, Safari 17+, Firefox 125+.

Techniques used in this demo

radial-gradient()MDN ↗grid-templateMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →