Hey Friends, today in this blog you'll learn how to create an animated product preview card design using HTML and CSS. IN our previous blog we saw how to create an awesome profile card using HTML and CSS. Earlier I shared lots of card designs but this one is different from them because I've used the clip-path property of advanced CSS in this project. Don't forget to check these card designs.
A Product Preview Card is an element of almost all e-commerce websites to display any product preview.
In this design [Animated Product Preview Card Design] we have a card with two background-color as you can see in the image above. In this card, there is an image of the product which is a wireless mouse and then we have some details about the product.
When we hover over the image then the background of the image changes its design and the details go up-side and a button comes in the place of details with a smooth transition. If you're unable to understand what am I trying to say So you can check the source code and preview it as well.
Preview of this project is available here.
Animated Product Preview Card Design [Source Code]
HTML Code
<!-- ------------------ Created By InCoder ------------------ -->
<!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>Animated Product Preview Card - InCoder</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="inContainer">
<div class="productImg">
<img src="images/mouse.png" alt="">
</div>
<div class="details">
<h3 class="title">Wireless Mouse</h3>
<p class="price">$20.8</p>
</div>
<button class="buyNow">Buy Now</button>
</div>
</body>
</html>
CSS Code
/* ------------------ Created By InCoder ------------------ */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Source Sans Pro', sans-serif;
}
body{
height: 100vh;
display: flex;
align-items: center;
background: #d5d5d524;
justify-content: center;
}
.inContainer {
display: flex;
overflow: hidden;
max-width: 18rem;
text-align: center;
position: relative;
max-height: 24.8rem;
align-items: center;
border-radius: 1.2rem;
flex-direction: column;
justify-content: center;
transition: clip-path .8s;
box-shadow: 1px 2px 10px #888;
}
.inContainer::before{
content: '';
top: 0%;
left: 0%;
height: 100%;
width: 100%;
z-index: -1;
position: absolute;
background: #33a7dd;
transition: clip-path .8s;
clip-path: polygon(0 0, 100% 0, 100% 35%, 0 70%);
}
.inContainer::after{
content: '';
top: 0%;
left: 0%;
height: 100%;
width: 100%;
z-index: -1;
position: absolute;
background: #000;
transition: clip-path .8s;
clip-path: polygon(0 100%, 100% 100%, 100% 35%, 0 70%);
}
.inContainer:hover::after{
clip-path: polygon(0 100%, 100% 100%, 100% 70%, 0 22%);
}
.inContainer:hover::before{
clip-path: polygon(0 0, 100% 0, 100% 70%, 0 22%);
}
.inContainer .productImg img{
z-index: 2;
max-width: 25rem;
transform: translateY(12px);
}
.inContainer .details .title{
color: #cecece;
font-size: 1.5rem;
}
.inContainer .details .price{
margin-top: 4px;
color: #cecece;
font-size: 1.4rem;
margin-bottom: 10px;
}
.inContainer .details{
transition: transform .8s;
transform: translateY(2rem);
}
.inContainer:hover .details{
transform: translateY(-1rem);
}
.inContainer:hover .buyNow{
opacity: 1;
pointer-events: all;
transform: translateY(-1rem);
}
.inContainer .buyNow{
cursor: pointer;
font-size: 16px;
font-weight: 600;
color: #33a7dd;
border-radius: 50px;
pointer-events: none;
padding: .5rem 1.5rem;
margin-bottom: 1.6rem;
transition: transform .8s;
border: 2px solid #33a7dd;
transform: translateY(6rem);
background-color: transparent;
}
.inContainer .buyNow:hover{
color: #fff;
transition: background-color .3s, color .3s;
background-color: #33a7dd;
}
Top comments (0)