How to design Animated Product Card Template using HTML and CSS ?

Last Updated : 05 Jan, 2024

In the dynamic world of web development, where creating engaging and visually appealing user interfaces is key, one effective strategy to captivate your audience involves seamlessly incorporating animated elements into your design. In this article, we will guide you through the process of creating a visually appealing animated product card template using HTML and CSS. Animated product cards not only enhance user engagement but also add a dynamic touch to your web applications, making them more interactive and user-friendly.

Preview

Screenshot-2024-01-04-163455

Approach

Create a simple HTML structure with a container and a card div for the product and include an image, course details, and a dropdown for course validity (size).
Apply basic styling to create a clean and visually appealing product card by using transitions for smooth hover effects on the card, image, and content.
Implement hover effects to enhance user interaction and enlarge the card and add a subtle shadow on hover for a dynamic appearance.
Style the dropdown menu for course validity with a clean and consistent look also ensure the dropdown has a smooth transition when selected.
Include a ‘Buy Now’ and ‘Add to Cart’ button with a vibrant color that changes on hover and create a link to prompt user action and complete the product card design.

Example: In this example, we will see how to create a Product Card using HTML and CSS.

HTML

<!DOCTYPE html> 
<html lang=""> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
  
    <link rel="stylesheet" 
          type="text/css"
          href="styles.css"> 
    <title>T-shirt Product Card</title> 
</head> 
  
<body> 
    <div class="container"> 
        <div class="card"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20240104153658/1-(1).jpg" 
                 alt="t-shirt"> 
            <div class="contentBx"> 
                <h2>DSA SELF-PACED COURSE</h2> 
                <p>Just Grab the Offer Within 24days</p> 
                <div class="size"> 
                    <label for="size">Course Validity</label> 
                    <select id="size"> 
                        <option value="s">3 Months</option> 
                        <option value="m">6 Months</option> 
                        <option value="l">9 Months</option> 
                        <option value="xl">12 Months</option> 
                    </select> 
                </div> 
                <a href="#" class="buyBtn">Buy Now</a> 
                <a href="#" class="cartBtn">Add to Cart</a> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

CSS

/* styles.css */
@import url( 
'https://fonts.googleapis.com/css?family=Poppins:100,300,400,500,600,700,800,800i,900&display=swap'); 
  
* { 
    padding: 0; 
    margin: 0; 
    font-family: 'Poppins', sans-serif; 
    box-sizing: border-box; 
    font-weight: 400; 
} 
  
body { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    min-height: 100vh; 
    background: #f5f5f5; 
} 
  
.container { 
    position: relative; 
    width: 320px; 
} 
  
.card { 
    position: relative; 
    width: 100%; 
    background: #fff; 
    border-radius: 10px; 
    overflow: hidden; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    transition: transform 0.3s, box-shadow 0.3s; 
    cursor: pointer; 
    transform-origin: center bottom; 
} 
  
.card:hover { 
    transform: scale(1.05); 
    box-shadow: 0 8px 90px rgba(0, 0, 0, 0.2); 
} 
  
.card img { 
    width: 100%; 
    height: auto; 
    display: block; 
    border-bottom: 1px solid #e0e0e0; 
    transition: transform 0.5s; 
} 
  
.card:hover img { 
    transform: scale(1.1); 
} 
  
.contentBx { 
    padding: 20px; 
    text-align: center; 
    transition: opacity 0.5s; 
} 
  
.card:hover .contentBx { 
    opacity: 1; 
} 
  
.contentBx h2 { 
    font-weight: 600; 
    color: #333; 
    margin-bottom: 10px; 
} 
  
.contentBx p { 
    color: #666; 
    margin-bottom: 20px; 
} 
  
.size { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    margin-bottom: 20px; 
} 
  
.size label { 
    margin-right: 10px; 
    color: #666; 
} 
  
.size select { 
    padding: 8px; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    outline: none; 
} 
  
.buyBtn { 
    display: inline-block; 
    padding: 10px 20px; 
    background: #fff; 
    border-radius: 10px; 
    text-decoration: none; 
    color: #fff; 
    font-weight: 600; 
    color: black; 
    transition: background 0.3s; 
} 
  
.buyBtn:hover { 
    background: #1BBFE9; 
} 
  
.cartBtn { 
    display: inline-block; 
    padding: 10px 20px; 
    background: #fff; 
    border-radius: 10px; 
    text-decoration: none; 
    color: black; 
    font-weight: 600; 
    margin-left: 10px; 
    transition: background 0.3s; 
} 
  
.cartBtn:hover { 
    background: #1BBFE9; 
}