In this tutorial I’ll learn how to create product Card with hover effect when hover the product Card the product details and Social icon appear with smoothly. If you are ready to create product Card hover effect so read till the end,
First Create a Html file and put the below code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Display Card</title>
<!-- ==================== Styling Card using CSS ===================== -->
<link rel="stylesheet" href="style.css">
<!-- ======================= Social Icon use Font awesome CDN =========================== -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"/>
<!-- ===================== Google Font CDN ====================== -->
<link href="https://fonts.googleapis.com/css2?family=Cal+Sans&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="productBox">
<div class="socialIcon">
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-whatsapp"></i>
<i class="fa-brands fa-pinterest"></i>
</div>
<img src="images/5.png" alt="" class="productImg">
<div class="productDetails">
<h1>product Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto amet sit ipsum error tempora. </p>
</div>
</div>
<div class="productBox">
<div class="socialIcon">
<i class="fa-brands fa-facebook-f ficon"></i>
<i class="fa-brands fa-whatsapp wicon"></i>
<i class="fa-brands fa-pinterest picon"></i>
</div>
<img src="images/2.png" alt="" class="productImg">
<div class="productDetails">
<h1>product Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto amet sit ipsum error tempora. </p>
</div>
</div>
<div class="productBox">
<div class="socialIcon">
<i class="fa-brands fa-facebook-f ficon"></i>
<i class="fa-brands fa-whatsapp wicon"></i>
<i class="fa-brands fa-pinterest picon"></i>
</div>
<img src="images/3.png" alt="" class="productImg">
<div class="productDetails">
<h1>product Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto amet sit ipsum error tempora. </p>
</div>
</div>
<div class="productBox">
<div class="socialIcon">
<i class="fa-brands fa-facebook-f ficon"></i>
<i class="fa-brands fa-whatsapp wicon"></i>
<i class="fa-brands fa-pinterest picon"></i>
</div>
<img src="images/4.png" alt="" class="productImg">
<div class="productDetails">
<h1>product Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto amet sit ipsum error tempora. </p>
</div>
</div>
</div>
</body>
</html>
/* ====================== For Reset ======================= */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ====================== For Center All Element ======================= */
body{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background: #0d0e0d;
}
/* ==================== It's parent and Design Card Inside ========================= */
.container{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 15px;
}
/* =================== This is the main box for design ========================== */
.productBox{
width: 280px;
height: 380px;
background-color: white;
display: flex;
justify-content: center;
border-radius: 10px;
position: relative;
overflow: hidden;
}
/* ===================== For Design Image that is inside the main box ======================== */
.productBox .productImg{
width: 100%;
height: 100%;
transition: 0.5s cubic-bezier(0.46,-0.48, 0.39, 1.43);
}
/* ================== Design Product Details =========================== */
.productBox .productDetails{
width: 90%;
min-height: 100px;
padding: 15px;
position: absolute;
bottom: -110px;
border-radius: 10px;
backdrop-filter: blur(5px);
box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
background: #ffffff75;
transition: 0.5s cubic-bezier(0.46,-0.48, 0.39, 1.43);
}
/* ==================== This is the social icon container ========================= */
.productBox .socialIcon{
width: 90%;
height: 40px;
position: absolute;
top: -50px;
display: flex;
justify-content: space-around;
align-items: center;
border-radius: 10px;
z-index: 1;
transition: 0.5s cubic-bezier(0.46,-0.48, 0.39, 1.43);
}
/* ==================== Design Icon ========================= */
.socialIcon i{
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
border-radius: 10px;
background: #111313c5;
color: rgb(255, 255, 255);
cursor: pointer;
}
/* ==================== Design H1 that is inside the Product Details ========================= */
.productDetails h1{
font-family: "Cal Sans", sans-serif;
font-size: 18px;
color: #061106;
text-transform: uppercase;
line-height: 30px;
}
/* ==================== Design P that is inside the Product Details ========================= */
.productDetails p{
font-family: "Poppins", sans-serif;
font-size: 10px;
color: #061106b0;
line-height: 12px;
}
/* ==================== Whan Hover the Product Box This Shows ========================= */
.productBox:hover .socialIcon{
top: 15px;
}
.productBox:hover .productDetails{
bottom: 15px;
}
.productBox:hover .productImg{
scale: .85;
}