Team Hover Cards

<div class="container py-5">
  <div class="row g-4">
    <div class="col-md-4">
      <div class="team-c text-center border rounded-4 overflow-hidden bg-white"><img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop" alt="Portrait of woman smiling" class="w-100" style="height:220px;object-fit:cover">
        <div class="p-3">
          <h5 class="mb-0 fw-bold">Ayesha Rahman</h5><small class="text-muted">Lead Designer</small>
          <div class="mt-2 team-social"><a href="#" class="text-dark mx-1"><i class="bi bi-twitter"></i></a><a href="#" class="text-dark mx-1"><i class="bi bi-linkedin"></i></a><a href="#" class="text-dark mx-1"><i class="bi bi-dribbble"></i></a></div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="team-c text-center border rounded-4 overflow-hidden bg-white"><img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop" alt="Portrait of man with beard" class="w-100" style="height:220px;object-fit:cover">
        <div class="p-3">
          <h5 class="mb-0 fw-bold">Rahim Uddin</h5><small class="text-muted">Full-stack Dev</small>
          <div class="mt-2 team-social"><a href="#" class="text-dark mx-1"><i class="bi bi-twitter"></i></a><a href="#" class="text-dark mx-1"><i class="bi bi-github"></i></a></div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="team-c text-center border rounded-4 overflow-hidden bg-white"><img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop" alt="Portrait of woman in glasses" class="w-100" style="height:220px;object-fit:cover">
        <div class="p-3">
          <h5 class="mb-0 fw-bold">Fatima Noor</h5><small class="text-muted">Product Manager</small>
          <div class="mt-2 team-social"><a href="#" class="text-dark mx-1"><i class="bi bi-linkedin"></i></a></div>
        </div>
      </div>
    </div>
  </div>
</div>