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; } } 
Top comments (0)