→ Morgan
→ Flip Animation Profile Info Card

Flip Animation Profile Info Card

Clean and responsive animated information card with subtle hover effects and smooth transitions, ideal for portfolios, team pages, or product showcases.

This Example is contributed by Morgan, on 26-Feb-2025. It is responsive. similar terms for this example are Profile Cards,User Profile,Profile,Author box,User information

Hover Effect Profile Card 3D Transform Flip Animation

Author Morgan

Fork Fullscreen

<div class="card-container">
  <div class="card">
    <div class="card-front">
      <div class="card-img">
        <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Profile Image">
      </div>
      <div class="card-info">
        <h3>Rebecca Martin</h3>
        <p>UX Designer</p>
      </div>
    </div>
    <div class="card-back">
      <h3>About Me</h3>
      <p>I'm a passionate UX designer with 5+ years of experience creating intuitive digital experiences.</p>
      <div class="stats">
        <div class="stat">
          <span class="stat-value">126</span>
          <span class="stat-label">Projects</span>
        </div>
        <div class="stat">
          <span class="stat-value">8+</span>
          <span class="stat-label">Years</span>
        </div>
        <div class="stat">
          <span class="stat-value">94%</span>
          <span class="stat-label">Satisfaction</span>
        </div>
      </div>
      <div class="social-links">
        <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
        <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
        <a href="#" class="social-link"><i class="fab fa-dribbble"></i></a>
      </div>
    </div>
  </div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

Related Examples

Interactive Profile Card with Social Media Links
Stunning profile card featuring smooth 3D transitions, social media integration, and modern gradient effects for enhanced user engagement

Author:
Emma Thompson

2 months ago
Flipping Card Animation
A stylish interactive card that smoothly flips to reveal content on the back when hovered. Perfect for showcasing product features or team members.

Author:
Sofia Martinez

1 month ago
Profile Card with Hover Reveal

Author:
Anonymous

4 weeks ago
Gradient Morphing Card with Hover Animation
Stunning profile card with dynamic gradient background animation and glassmorphism effects, perfect for showcasing user profiles or team members.

Author:
Emma Thompson

2 months ago
Animated Profile Card with Hover Effects and Social Links

Author:
Priya Sharma

2 months ago
Profile Card
A beautifully designed profile card featuring smooth gradient animations and social media integration for modern web applications

Author:
Emma Thompson

2 months ago
Modern User Profile Card with Animated Stats

Author:
Emma Thompson

2 months ago
Gradient Morphing Card with 3D Hover Effect
Elegant floating card component with dynamic gradient animation and smooth 3D hover interactions, perfect for showcasing premium content or user profiles.

Author:
Anonymous

2 months ago
Flip cards
A collection of interactive animated cards that flip and transform on hover, adding dynamic visual interest to your web page.

Author:
Aiden Mercer

1 month ago
Floating Social Media Profile Card
A beautifully designed profile card featuring smooth gradient backgrounds, hover animations, and social media integration

Author:
Emma Thompson

2 months ago
Pokemon Card with Flip Animation
A beautifully designed interactive Pokemon card with 3D flip animation, displaying character stats and type information.

Author:
Sofia Martinez

1 month ago
Profile Information Card

Author:
Anonymous

1 month ago

Didn't find component you were looking for?

Search from 500+ components