Web Designer Wall

Snippets Hover

Bootstrap 5 Team Section with Image Hover Effect

A three-person team section with portrait cards that zoom on hover and reveal social links.

Bootstrap 5 No jQuery Aug 2020 3.7K views 

<section class="wdw-stage">
  <div class="container" style="max-width: 1000px">
    <div class="text-center mb-5">
      <span class="wdw-eyebrow">Our people</span>
      <h2 class="wdw-heading display-6 mt-2 mb-2">Meet our team</h2>
      <p class="wdw-muted mx-auto mb-0" style="max-width: 460px">Designers, managers and engineers who ship great work together.</p>
    </div>
    <div class="row g-4">
      <div class="col-12 col-md-4">
        <article class="team-card wdw-card h-100">
          <div class="team-photo">
            <img src="https://i.pravatar.cc/600?img=12" alt="William, Web Designer" width="600" height="600" loading="lazy">
            <div class="team-overlay">
              <a href="#" class="team-social" aria-label="William on LinkedIn"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3 9.75h4V21H3V9.75Zm6.5 0h3.8v1.54h.05c.53-1 1.82-2.04 3.75-2.04 4 0 4.75 2.63 4.75 6.06V21h-4v-4.9c0-1.17-.02-2.67-1.63-2.67-1.63 0-1.88 1.27-1.88 2.58V21h-4V9.75Z"/></svg></a>
              <a href="#" class="team-social" aria-label="Email William"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></a>
            </div>
          </div>
          <div class="p-4 text-center">
            <h3 class="h5 fw-bold mb-1">William</h3>
            <p class="text-primary fw-semibold small mb-2">Web Designer</p>
            <p class="wdw-muted small mb-0">Turns rough ideas into clean, usable interfaces.</p>
          </div>
        </article>
      </div>
      <div class="col-12 col-md-4">
        <article class="team-card wdw-card h-100">
          <div class="team-photo">
            <img src="https://i.pravatar.cc/600?img=33" alt="David, Project Manager" width="600" height="600" loading="lazy">
            <div class="team-overlay">
              <a href="#" class="team-social" aria-label="David on LinkedIn"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3 9.75h4V21H3V9.75Zm6.5 0h3.8v1.54h.05c.53-1 1.82-2.04 3.75-2.04 4 0 4.75 2.63 4.75 6.06V21h-4v-4.9c0-1.17-.02-2.67-1.63-2.67-1.63 0-1.88 1.27-1.88 2.58V21h-4V9.75Z"/></svg></a>
              <a href="#" class="team-social" aria-label="Email David"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></a>
            </div>
          </div>
          <div class="p-4 text-center">
            <h3 class="h5 fw-bold mb-1">David</h3>
            <p class="text-primary fw-semibold small mb-2">Project Manager</p>
            <p class="wdw-muted small mb-0">Keeps every release on schedule and everyone aligned.</p>
          </div>
        </article>
      </div>
      <div class="col-12 col-md-4">
        <article class="team-card wdw-card h-100">
          <div class="team-photo">
            <img src="https://i.pravatar.cc/600?img=47" alt="Niharika, Hybris Developer" width="600" height="600" loading="lazy">
            <div class="team-overlay">
              <a href="#" class="team-social" aria-label="Niharika on LinkedIn"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3 9.75h4V21H3V9.75Zm6.5 0h3.8v1.54h.05c.53-1 1.82-2.04 3.75-2.04 4 0 4.75 2.63 4.75 6.06V21h-4v-4.9c0-1.17-.02-2.67-1.63-2.67-1.63 0-1.88 1.27-1.88 2.58V21h-4V9.75Z"/></svg></a>
              <a href="#" class="team-social" aria-label="Email Niharika"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></a>
            </div>
          </div>
          <div class="p-4 text-center">
            <h3 class="h5 fw-bold mb-1">Niharika</h3>
            <p class="text-primary fw-semibold small mb-2">Hybris Developer</p>
            <p class="wdw-muted small mb-0">Builds the commerce backbone behind every storefront.</p>
          </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