DEV Community

Cover image for Animated Product Preview Card Design Using HTML and CSS
Ashutosh Tiwari
Ashutosh Tiwari

Posted on • Originally published at incoderweb.blogspot.com

3 2

Animated Product Preview Card Design Using HTML and CSS

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay