→ Maya Johnson
→ Elegant Profile Hover Card with Animatio...

Elegant Profile Hover Card with Animation Effects

A stylish hover card that reveals detailed user information with a smooth animation when hovering over a profile thumbnail.

This Example is contributed by Maya Johnson, on 24-Mar-2025. It is responsive. similar terms for this example is Transitions

Animation Profile Social Interaction

Author Maya Johnson

Fork Fullscreen

<div class="card-container">
  <div class="hover-card">
    <div class="card-avatar">
      <img src="https://randomuser.me/api/portraits/women/42.jpg" alt="Alexandra Chen">
    </div>
    <div class="card-content">
      <div class="card-header">
        <h3>Alexandra Chen</h3>
        <span class="username">@alex_design</span>
      </div>
      <p class="bio">UI/UX Designer & Frontend Developer based in San Francisco</p>
      <div class="card-stats">
        <div class="stat">
          <span class="stat-value">468</span>
          <span class="stat-label">Posts</span>
        </div>
        <div class="stat">
          <span class="stat-value">1.2k</span>
          <span class="stat-label">Followers</span>
        </div>
        <div class="stat">
          <span class="stat-value">348</span>
          <span class="stat-label">Following</span>
        </div>
      </div>
      <div class="card-actions">
        <button class="btn primary">Follow</button>
        <button class="btn secondary">Message</button>
      </div>
      <div class="social-links">
        <a href="#" class="social-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
        </a>
        <a href="#" class="social-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
        </a>
        <a href="#" class="social-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
        </a>
      </div>
    </div>
  </div>
</div>

Related Examples