Responsive Animated Card Design using HTML and CSS Only

Hello friends, today in this blog you will learn how to create responsive animated card design using HTML and CSS only. In our previous blog, we saw how to create a filterable image gallery with a preview using HTML, CSS, and Javascript. I have shared many card designs earlier. Now it's time to create another one. If you are interested to check card designs. So you can check here.

In this design [Responsive Animated Card Design], there are three product cards as you can see in the image above. When you hover on the card it goes up with a smooth transition and its box shadow will also increase. First of all, there is a product image on the top of the card and then it has the product name, and after it has the description of the product last but not least it has a buy now button.

If you are filling difficulty understanding what am I trying to say, So you can check the source code and preview as well.

Visit here to check preview.

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 Card Design - InCoder</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <div class="productContainer">
        <div class="card">
            <div class="header" style="height: 17rem;">
                <img src="https://drive.google.com/uc?id=1p-U1HYQRRFKAEDC4JzSqps4YWtpQ8_Pc&export=view" alt="Product">
            </div>
            <div class="footer">
                <div class="title">
                    <h2>Smart Watch</h2>
                </div>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque ratione tempore consequuntur voluptatem obcaecati asperiores est iusto.</p>
                <button class="buyNow">Buy Now</button>
            </div>
        </div>
        <div class="card">
            <div class="header" style="height: 17rem;">
                <img src="https://drive.google.com/uc?id=19w5IpBg45HXZsUc2cYF-LsyDcoxs_aLZ&export=view" alt="Product">
            </div>
            <div class="footer">
                <div class="title">
                    <h2>IPhone 13 Pro</h2>
                </div>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque ratione tempore consequuntur voluptatem obcaecati asperiores est iusto.</p>
                <button class="buyNow">Buy Now</button>
            </div>
        </div>
        <div class="card">
            <div class="header" style="height: 17rem;">
                <img src="https://drive.google.com/uc?id=1fkkvLxXRjMTCCtLwUZmWXlKOBOYd3IbM&export=view" alt="Product">
            </div>
            <div class="footer">
                <div class="title">
                    <h2>Sports Shoe</h2>
                </div>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque ratione tempore consequuntur voluptatem obcaecati asperiores est iusto.</p>
                <button class="buyNow">Buy Now</button>
            </div>
        </div>
    </div>
</body>

</html>

CSS Code

/* ------------------- Created By InCoder ------------------- */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}

.productContainer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.card {
    height: auto;
    overflow: hidden;
    max-width: 22rem;
    border-radius: 1rem;
    margin: 1rem 2rem;
    font-family: 'Poppins', sans-serif;
    transition: transform 0.5s, box-shadow 0.5s;
    box-shadow: 0px 0px 20px 1px rgb(204 204 204 / 50%);
}

.card:hover {
    transform: translateY(-15px);
    box-shadow: 0px 10px 20px 0px rgb(204 204 204 / 50%);
}

.card .header {
    z-index: 2;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    background-color: #ff0;
    border-radius: 0rem 0rem 4rem 0rem;
}

.card .header::before {
    content: "";
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 0rem 0rem 4rem 0rem;
}

.card .header img {
    width: 85%;
}

.card .footer {
    z-index: 2;
    text-align: center;
    position: relative;
    padding: 20px 20px 20px 20px;
}

.card .footer::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    height: 100%;
    position: absolute;
    background-color: #fff;
    border-radius: 3rem 0rem 0rem 0rem;
}

.card .footer .title {
    font-size: 1.4rem;
    margin-bottom: .4rem;
}

.card .footer p {
    font-size: .8rem;
}

.productContainer .card:nth-child(2) .header img {
    width: 120%;
}

.productContainer .card:nth-child(3) .header img {
    width: 120%;
}

.productContainer .card:nth-child(1) .header::before {
    background-image: linear-gradient(to bottom, #2f354d, #23252c);
}

.productContainer .card:nth-child(1) .footer {
    background: #23252c;
}

.productContainer .card:nth-child(2) .header::before {
    background-image: linear-gradient(to bottom, #01408f, #011842);
}

.productContainer .card:nth-child(2) .footer {
    background: #011842;
}

.productContainer .card:nth-child(3) .header::before {
    background-image: linear-gradient(to bottom, #e93632, #501823);
}

.productContainer .card:nth-child(3) .footer {
    background: #501823;
}

.buyNow {
    cursor: pointer;
    margin-top: 1rem;
    font-size: 1rem;
    border-radius: 5rem;
    padding: .6rem 2rem;
    background-color: #fff;
    transition: all .2s ease-in-out;
}

.productContainer .card:nth-child(1) .buyNow {
    color: #2f354d;
    border: 2px solid #2f354d;
}

.productContainer .card:nth-child(1) .buyNow:hover {
    color: #fff;
    background-color: #2f354d;
}

.productContainer .card:nth-child(2) .buyNow {
    color: #01408f;
    border: 2px solid #01408f;
}

.productContainer .card:nth-child(2) .buyNow:hover {
    color: #fff;
    background-color: #01408f;
}

.productContainer .card:nth-child(3) .buyNow {
    color: #e93632;
    border: 2px solid #e93632;
}

.productContainer .card:nth-child(3) .buyNow:hover {
    color: #fff;
    background-color: #e93632;
}

@media (max-width: 1248px) {
    .productContainer {
        margin-top: 29rem;
    }
}

@media (max-width: 832px) {
    .productContainer:nth-child(1) {
        margin-top: 92rem;
    }
}

Blog

Responsive Animated Card Design using HTML and CSS Only

Ashutosh Tiwari

HTML Code

CSS Code

Join Our Newsletter. No Spam, Only the good stuff.

Related