Web Designer Wall

Snippets Hover

Bootstrap 5 Team Section with Hover Social Icons

A four-person team grid with portrait cards that zoom on hover and reveal social icon buttons, also reachable by keyboard focus and always visible on touch devices.

Bootstrap 5 No jQuery Aug 2020 2.3K views 

<section class="wdw-stage">
  <div class="container" style="max-width: 1040px">
    <div class="text-center mx-auto mb-5" style="max-width: 540px">
      <span class="wdw-eyebrow">Our people</span>
      <h2 class="wdw-heading display-6 mt-1 mb-3">Meet our team</h2>
      <p class="wdw-muted mb-0">A small group of designers and engineers who care about the details. Hover a portrait to say hello.</p>
    </div>
    <div class="row g-3 g-lg-4">
      <div class="col-6 col-lg-3">
        <article class="member position-relative overflow-hidden rounded-4">
          <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&crop=faces&w=480&h=600&q=70" alt="Portrait of Tomas Weber" loading="lazy">
          <div class="member-info">
            <h3 class="h6 fw-bold mb-0">Tomas Weber</h3>
            <p class="small mb-0 opacity-75">Chief Executive</p>
          </div>
          <div class="member-social" role="group" aria-label="Tomas Weber on social media">
            <a href="#" aria-label="Tomas on LinkedIn"><i class="bi bi-linkedin" aria-hidden="true"></i></a>
            <a href="#" aria-label="Tomas on X"><i class="bi bi-twitter-x" aria-hidden="true"></i></a>
            <a href="#" aria-label="Tomas on Instagram"><i class="bi bi-instagram" aria-hidden="true"></i></a>
          </div>
        </article>
      </div>
      <div class="col-6 col-lg-3">
        <article class="member position-relative overflow-hidden rounded-4">
          <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&crop=faces&w=480&h=600&q=70" alt="Portrait of Michael Clarke" loading="lazy">
          <div class="member-info">
            <h3 class="h6 fw-bold mb-0">Michael Clarke</h3>
            <p class="small mb-0 opacity-75">Head of Design</p>
          </div>
          <div class="member-social" role="group" aria-label="Michael Clarke on social media">
            <a href="#" aria-label="Michael on LinkedIn"><i class="bi bi-linkedin" aria-hidden="true"></i></a>
            <a href="#" aria-label="Michael on X"><i class="bi bi-twitter-x" aria-hidden="true"></i></a>
            <a href="#" aria-label="Michael on Instagram"><i class="bi bi-instagram" aria-hidden="true"></i></a>
          </div>
        </article>
      </div>
      <div class="col-6 col-lg-3">
        <article class="member position-relative overflow-hidden rounded-4">
          <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&crop=faces&w=480&h=600&q=70" alt="Portrait of Carlos Vento" loading="lazy">
          <div class="member-info">
            <h3 class="h6 fw-bold mb-0">Carlos Vento</h3>
            <p class="small mb-0 opacity-75">Engineering Lead</p>
          </div>
          <div class="member-social" role="group" aria-label="Carlos Vento on social media">
            <a href="#" aria-label="Carlos on LinkedIn"><i class="bi bi-linkedin" aria-hidden="true"></i></a>
            <a href="#" aria-label="Carlos on X"><i class="bi bi-twitter-x" aria-hidden="true"></i></a>
            <a href="#" aria-label="Carlos on Instagram"><i class="bi bi-instagram" aria-hidden="true"></i></a>
          </div>
        </article>
      </div>
      <div class="col-6 col-lg-3">
        <article class="member position-relative overflow-hidden rounded-4">
          <img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?auto=format&fit=crop&crop=faces&w=480&h=600&q=70" alt="Portrait of Daniel Reyes" loading="lazy">
          <div class="member-info">
            <h3 class="h6 fw-bold mb-0">Daniel Reyes</h3>
            <p class="small mb-0 opacity-75">Product Manager</p>
          </div>
          <div class="member-social" role="group" aria-label="Daniel Reyes on social media">
            <a href="#" aria-label="Daniel on LinkedIn"><i class="bi bi-linkedin" aria-hidden="true"></i></a>
            <a href="#" aria-label="Daniel on X"><i class="bi bi-twitter-x" aria-hidden="true"></i></a>
            <a href="#" aria-label="Daniel on Instagram"><i class="bi bi-instagram" aria-hidden="true"></i></a>
          </div>
        </article>
      </div>
    </div>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Related snippets

More hover snippets