team-grid-hover-bio

Summary

Four-up grid of attorney portraits where a frosted, dark-tinted bio bar sits at the bottom of each card and reveals on hover, showing name, role and three social icons.

HTML structure (minimal)

<section class="pb-0">
  <div class="container">
    <div class="row g-4 mb-2 align-items-center justify-content-between">
      <div class="col-lg-5">
        <div class="subtitle wow fadeInUp">Our Lawyer Team</div>
        <h2 class="wow fadeInUp" data-wow-delay=".2s">Meet Our Experienced Legal Expert Team</h2>
      </div>
      <div class="col-lg-5">
        <p class="mb-4 wow fadeInUp" data-wow-delay=".4s">We deliver professional legal support...</p>
      </div>
    </div>
    <div class="row g-4">
      <div class="col-lg-3 col-sm-6 wow fadeInRight">
        <div class="relative overflow-hidden hover">
          <a href="team-single.html"><img src="images/team/c1.webp" class="w-100" alt=""></a>
          <div class="abs w-100 start-0 bottom-0 z-3">
            <div class="p-2 pb-3 hover-op-1 text-light text-center bg-blur overlay-black-5">
              <h3 class="mb-0">Thomas Bennett</h3>
              <p class="mb-2">Senior Corporate Attorney</p>
              <div class="social-icons">
                <a href="#"><i class="bg-white id-color bg-hover-2 text-hover-white fa-brands fa-facebook-f"></i></a>
                <a href="#"><i class="bg-white id-color bg-hover-2 text-hover-white fa-brands fa-x-twitter"></i></a>
                <a href="#"><i class="bg-white id-color bg-hover-2 text-hover-white fa-brands fa-instagram"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 3 more team cards -->
    </div>
  </div>
</section>

Key SCSS tokens

.relative.overflow-hidden.hover { position: relative; cursor: pointer; }
.hover-op-1 { opacity: 0; transition: opacity .3s ease; }
.hover:hover .hover-op-1 { opacity: 1; }
.bg-blur {
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(10px);
}
.overlay-black-5 { background-color: rgba(0, 0, 0, .5); }
.social-icons a i {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: var(--primary-color);
  margin: 0 4px;
  transition: all .3s;
}
.social-icons a:hover i {
  background: var(--secondary-color);
  color: #fff;
}

Notable details

• Bio bar uses a stacked bg-blur (frosted glass) plus overlay-black-5 (50% black) so the team photo is darkened but not erased — the portrait stays partially visible behind the text.
• Card itself is a <div class="relative hover"> — the .hover ancestor is the trigger, allowing the bio (.hover-op-1) and the photo (.hover-scale-1-2) to react together.
• Social icons combine four utility classes (bg-white, id-color, bg-hover-2, text-hover-white) — minimal markup, full hover swap.

Use when

• Team / staff grids where every face deserves to remain visible at rest.
• Studios that prefer a calm grid with hover-as-discovery instead of always-on captions.

Caveats

• Bio reveal requires hover; on touch devices the first tap reveals, the second follows the link to team-single.html — be sure that's the desired UX.
• The bg-blur backdrop-filter is GPU-heavy; rendering 4 simultaneously on low-end mobile causes scroll jank.