Advance CSS Card Image hover effect – 2021
In this article you see how to create beautiful image card hover effect using only HTML and CSS. Create folder ImageCardEffect where you want to save your project and open this folder on your favorite editor.
Create file index.html and style.css on the ImageCardEffect.
Folder structure
ImageCardEffect./
├─ index.html
├─ style.css
Here is the complete code of my index.html
<!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>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="card">
<div class="img_container">
<img
src="https://image.freepik.com/free-photo/young-man-medical-protective-mask-looking-camera-with-happy-face-showing-thumb-up-isolated-blue-background_141793-20193.jpg"
alt="profile"
/>
</div>
<div class="details">
<h2>CHANDAN KUMAR</h2>
<p>Stay safe and healthy and wear masks</p>
</div>
</div>
</body>
</html>
Here is the complete code of my style.css
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,[email protected],300;1,200&display=swap");
* {
margin: 0;
padding: 0%;
box-sizing: border-box;
}
body {
background: #252522;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: "Poppins", sans-serif;
}
.card {
width: 350px;
height: 370px;
background-color: white;
border-radius: 5px;
position: relative;
box-shadow: 0 3px 10px 2px rgba(22, 22, 22, 0.2);
}
.card::before,
.card::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0%;
right: 0%;
width: 100%;
height: 100%;
border-radius: 5px;
background-color: #fff;
z-index: -1;
transition: 0.3s;
}
.card:hover::before {
transform: rotate(-18deg);
}
.card:hover::after {
transform: rotate(18deg);
}
.img_container {
position: absolute;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
background: whitesmoke;
z-index: 2;
transition: 0.3s;
}
.img_container img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
object-fit: cover;
}
.card:hover .img_container {
bottom: 80px;
}
.details {
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
height: 70px;
text-align: center;
}
.details h2 {
font-weight: bold;
color: #3d0025;
}
.details p {
color: #ea0173;
}
Hope you like this effect
You can download the full code here and star the code
Thank you for reading this article.
