Hello Guys in this post i will teach you how to create beautiful fully responsive card hover effect using only HTML & CSS.
For Creating this I Use CSS Flex box property which create this card fully responsive.
I created these black overlays using CSS Before & After property. and then use some transition delay so that one overlay come after some delay which gives us beautiful curtain effect.
you can create this by watching my YouTube video.
Full Video Tutorial👇👇
Here Is the HTML code for Hover Card.👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- link css -->
<link rel="stylesheet" href="style.css">
<title>Card</title>
</head>
<body>
<div class="container">
<div class="card">
<img src="image1.jpg" alt="image">
<div class="content">
<h2>City</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dignissimos excepturi nostrum necessitatibus doloremque?</p>
</div>
</div>
<div class="card">
<img src="image2.jpg" alt="image">
<div class="content">
<h2>Beach</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dignissimos excepturi nostrum necessitatibus doloremque?</p>
</div>
</div>
<div class="card">
<img src="image3.jpg" alt="image">
<div class="content">
<h2>Desert</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dignissimos excepturi nostrum necessitatibus doloremque?</p>
</div>
</div>
</div>
</body>
</html>
Here Is the CSS code for Hover Card.👇
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;
700;800;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}
.container{
padding: 0 10px;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 30px;
}
.container .card{
max-width: 340px;
max-height: 510px;
position: relative;
border-radius: 10px;
overflow: hidden;
}
.container .card::before,
.container .card::after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 50%;
background: rgba(0, 0, 0, 0.4);
transition: .6s ease-in-out;
z-index: 1;
}
.container .card::after{
top: 50%;
transition-delay: 0.2s;
}
.container .card img{
display: flex;
align-items: center;
justify-content: center;
object-fit: cover;
width: 100%;
height: auto;
transition: .6s ease-in-out;
}
.container .card .content{
color: #fff;
padding: 30px;
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
opacity: 0;
transform: translateY(30px);
transition: .6s ease-in-out;
transition-delay: 0.3s;
}
.container .card .content h2{
margin-bottom: 10px;
font-size: 30px;
font-weight: 800;
}
.container .card .content p{
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.container .card:hover::before,
.container .card:hover::after{
width: 100%;
}
.container .card:hover .content{
opacity: 1;
transform: translateY(0);
}
.container .card:hover img{
transform: scale(1.1);
}
Download Full Source code with Image 👇
