Hey, developers welcome to Day 16 of our 90Days 90Projects challenge. And in Day 16 we are going to create a Card Hover Effect using HTML and CSS.
So to run the code you just need to copy the HTML and CSS code and run it into your code Editor.
Preview
HTML Code
<!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">
<title> Card Hover Effect </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main-div">
<div class="card">
<div class="imgbox">
<img src="./card-Image.jpg" alt="">
</div>
<div class="content">
<h2>Keep Smiling</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, eum! Repellendus nemo voluptates
eius, illum esse consectetur ex laborum facilis saepe nesciunt suscipit! Raju Koth Kalan</p>
</div>
</div>
<div class="card">
<div class="imgbox">
<img src="./card-Image.jpg" alt="">
</div>
<div class="content">
<h2>Keep Smiling</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, eum! Repellendus nemo voluptates
eius, illum esse consectetur ex laborum facilis saepe nesciunt suscipit! Raju Koth Kalan</p>
</div>
</div>
<div class="card">
<div class="imgbox">
<img src="./card-Image.jpg" alt="">
</div>
<div class="content">
<h2>Keep Smiling</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, eum! Repellendus nemo voluptates
eius, illum esse consectetur ex laborum facilis saepe nesciunt suscipit! Raju Koth Kalan</p>
</div>
</div>
</div>
</body>
</html>
CSS Code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(243, 154, 11);
}
.card {
margin: 0 2rem 0 2rem;
position: relative;
width: 300px;
height: 180px;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
padding: 30px;
transition: .3s;
background-color: #fff;
cursor: pointer;
}
.card:hover {
height: 350px;
transition: .3s;
}
.card:hover .content {
transform: translateY(-170px);
opacity: 1;
}
.imgbox {
position: relative;
width: 100%;
height: 100%;
z-index: 99;
}
img {
width: 100%;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
transform: translateY(-80px);
}
.content {
transition: .3s;
transform: translateY(-350px);
text-align: center;
opacity: 0;
}
.content h2 {
margin-bottom: 0.3rem;
}
.main-div {
width: 100%;
height: 100vh;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
