team-overlay-cards

Summary

Three-up team cards (CEO, Business Lawyer, Criminal Lawyer). Each card is portrait + name + role; on hover, a teal gradient overlay scales up from the bottom edge of the photo and reveals four amber social-icon links.

HTML structure (minimal)

<div class="row row-cols-xl-3 row-cols-1 mb-5">
  <div class="col mb-3">
    <div class="card card-overlay gap-3">
      <div class="card-image position-relative">
        <img src="image/team-1.jpg" class="img-fluid">
        <div class="card-body">
          <div class="d-flex flex-column gap-2 h-100 w-100 align-items-center justify-content-end p-5 text-white">
            <div class="social-container">
              <a href="#" class="social-item-2"><i class="fa-brands fa-facebook-f"></i></a>
              <a href="#" class="social-item-2"><i class="fa-brands fa-twitter"></i></a>
              <a href="#" class="social-item-2"><i class="fa-brands fa-instagram"></i></a>
              <a href="#" class="social-item-2"><i class="fa-brands fa-youtube"></i></a>
            </div>
          </div>
        </div>
      </div>
      <div class="card-footer border-0 bg-white">
        <div class="d-flex flex-column align-items-center text-center">
          <h4 class="accent-color">Adam William</h4>
          <span class="font-2 text-color">CEO Pillar</span>
        </div>
      </div>
    </div>
  </div>
  <!-- 2 more cards -->
</div>

Key SCSS tokens

.card-overlay .card-body {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,56,63,0) 0%, rgba(4,56,63,0.72) 100%);
  opacity: 0;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: all .5s;
}
.card-overlay:hover .card-body {
  opacity: 1;
  transform: scaleY(1);
}

Notable details

• The reveal is a scaleY transform from transform-origin: bottom — the overlay rises like a curtain rather than fading in. Reads more "considered design" than the usual opacity: 0 → 1.
• Card uses Bootstrap's .card-footer for the name/role plate, but with border-0 bg-white so it doesn't read as a card foot — handy way to get a tight, separated caption beneath the image.
• Overlay only shows social icons; the name/role stays visible in the white footer plate at all times. Information always present, decoration on hover.

Use when

• Team grids and portfolio cards where you want decorative overlay content (socials, tags) on hover but never want to hide the primary caption.
• Anywhere you want a less generic alternative to fade-in-up overlay reveals.

Caveats

• Vertical scale transforms can produce subpixel jitter at the seam during the transition — tune transition-timing-function: cubic-bezier(.4,0,.2,1) if it bothers you.
• The four social icons are hardcoded; if a team member only has two profiles you need to either omit some or align the row with justify-content-center.