How To Create Card In Html CSS With Hover Effects

source

Want to add a modern card design with hover animations to your website? 🎨✨ In this tutorial, we’ll create a stunning profile card using HTML & CSS, featuring smooth hover effects, a floating image transition, and animated social media icons.

This interactive card is perfect for team member profiles, portfolios, and business websites. No JavaScript is required—just pure HTML & CSS magic! 🚀

Why Use Card Hover Effects?

✔ Enhances User Experience – Engaging hover effects create a more interactive UI.
✔ Modern & Stylish – A floating image effect adds a unique touch.
✔ Easy to Implement – Simple HTML & CSS, no JavaScript needed.
✔ Ideal for Portfolios & Team Sections – Display personal details with style.

HTML Structure: Building the Card

The HTML structure consists of:

An image container (.imgbx) that moves on hover.
A content section (.content) that slides up with profile details.
Social media icons (.sci) with a rotation hover effect.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <title>Card Hover Effects</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
  <div class="card">
    <div class="imgbx">
      <img src="img.jpg">
    </div>
    <div class="content">
      <div class="details">
        <h2>John Doe<br><span>Senior Designer</span></h2>
        <ul class="sci">
          <li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
          <li><a href="#"><i class="fa-brands fa-x-twitter"></i></a></li>
          <li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
          <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
        </ul>
      </div>
    </div>
  </div>
</body>
</html>

Breaking Down the HTML:

✔ The .card container holds the profile details.
✔ The .imgbx section displays the profile picture.
✔ The .content section contains the name, designation, and social icons.
✔ Each icon (.sci li a) has a hover animation for an engaging effect.

CSS: Styling & Adding Hover Effects

The CSS adds the hover animations, including:
✅ Image float effect on hover.
✅ Sliding content animation.
✅ Rotating social icons.

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,500');
*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Josefin Sans', sans-serif;
}
body 
{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #141c22;
}
.card 
{
  position: relative;
  width: 300px;
  height: 400px;
  background: linear-gradient(#2196f3,#2196f3 30%, #1d3548 30%, #1d3548 100%);
  border-radius: 20px;
  overflow: hidden;
}
.imgbx 
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transition: 0.5s;
  transform-origin: top;
  border-radius: 20px;
  overflow: hidden;
}
.imgbx img 
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card:hover .imgbx  
{
  transform: translateY(30px) scale(0.5);
}
.content 
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: 0.5s;
  padding-bottom: 30px;
  transform: translateY(100%);
}
.card:hover .content  
{
  transform: translateY(0);
}
.content .details 
{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
.content .details h2 
{
  color: #fff;
  line-height: 1.2em;
  font-weight: 500;
}
.content .details h2 span 
{
  font-size: 0.8em;
  font-weight: 400;
  color: #03a9f4;
}
.sci 
{
  position: relative;
  display: flex;
  margin-top: 5px;
  gap: 8px;
}
.sci li 
{
  list-style: none;
  display: flex;
}
.sci li a 
{
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #294d69;
  font-size: 1.5em;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  transition: 0.5s;
}
.sci li a:hover 
{
  background: #03a9f4;
  transform: rotate(360deg);
}

How the Hover Effect Works:

1️⃣ On hover, the image (.imgbx) shrinks and moves down.
2️⃣ The content (.content) slides up to reveal the name, title, and social icons.
3️⃣ The social icons (.sci li a) rotate on hover, adding a fun animation effect.

Final Result: A Stunning Hover-Animated Card

🎯 The image smoothly moves down, revealing the profile details.
🎯 The social icons spin on hover, making the design more engaging.
🎯 The layout adapts easily, making it great for team sections and personal profiles.

Can I use this effect for multiple cards?

Yes! Simply duplicate the .card div and update the content (name, image, links).

Is this card design responsive?

Yes! The design scales well for different screen sizes. However, for small screens, you may need some minor adjustments.

Can I change the colors?

Absolutely! Modify the background gradients and hover colors in CSS.

Do I need JavaScript for this effect?

No! This pure CSS solution provides smooth hover animations without JavaScript.

Conclusion

This CSS hover card design is an elegant way to display team members, portfolio items, or product details. With smooth animations and stylish hover effects, it adds an interactive touch to any website. Try it out today! 🚀