In this blog post, we’ll walk through how to create a modern image card hover effect using only HTML and CSS. This design is perfect for portfolios, gallery sections, blog previews, product listings, and any layout that uses visual cards to display content.
Hover effects add an interactive layer to your web design, improving user engagement and overall user experience. With just a few lines of clean HTML and creative CSS, you can build lightweight and responsive image cards without relying on JavaScript or external libraries.
This tutorial is ideal for beginners learning front-end development, as well as developers looking to add interactive UI elements to their websites.
What You’ll Learn:
- How to create an image card layout with HTML
- How to style cards using CSS Flexbox or Grid
- How to add hover animations using CSS transitions and transform effects
- Tips for making your card design responsive across all devices
By the end of this tutorial, you’ll have a fully functional and visually appealing image card hover effect that you can reuse in any project.
You can watch the full step-by-step tutorial on my YouTube channel for the complete code breakdown and explanation.
Step 1: Create the HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<title>Card Design Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<div class="content">
<h1>Nature</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </p>
<button class="btn-primary">Learn More</button>
</div>
</div>
</body>
</html>
Step 2: Style the Card with CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Montserrat", sans-serif;
}
body {
background: #000;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-image: url(body.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.card {
position: relative;
min-width: 400px;
min-height: 500px;
border-radius: 16px;
overflow: hidden;
filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.25));
background-image: url("background.jpg");
background-repeat: no-repeat;
background-size: cover;
border: 4px solid #fff;
transition: all 0.3s ease-in-out;
}
.card::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0) 0%,
rgba(0, 0, 0, 0.408) 62%,
rgba(0, 0, 0, 0.8) 99%
);
}
.card > .content {
color: #fff;
position: absolute;
bottom: -85px;
left: 20px;
right: 20px;
z-index: 1;
transition: all 0.3s ease-in-out;
}
.card .content h1,
.card .content p {
margin: 0 0 15px;
}
.btn-primary {
border: none;
padding: 10px 30px;
border-radius: 5px;
font-weight: 600;
cursor: pointer;
font-size: 12px;
background: #fff;
color: #000;
transition: all 0.3s ease-in-out;
}
.btn-primary:hover {
background: #1bfff4;
}
.card:hover .content {
bottom: 20px;
}
/* .card:hover {
transform: scale(1.05);
background-position-x: 100%;
} */
Conclusion
By following these steps, you’ve successfully created a modern and responsive Image Card Hover Effect using HTML and CSS. This design can be easily customized to match the look and feel of any website, whether it’s a portfolio, blog, or product showcase.
Feel free to tweak the styles, animations, and layout to suit your specific project needs and enhance the visual appeal of your website.
Happy coding!
Assets:
