Welcome to codeswithpankaj.com! In this tutorial, we will create an interactive product card with cart items using HTML and CSS. This card will have a hover effect that flips the card to reveal more details.
Step 1: HTML Structure
First, we will set up the basic HTML structure for our product card. Create an HTML file and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Card with Cart Items</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="card">
<div class="card-inner">
<div class="card-front">
<img src="shoe.png" alt="Nike Air">
<h3>Nike Air (Women)<br>Size 7</h3>
<p>Price £199.99</p>
<button>Add to basket</button>
</div>
<div class="card-back">
<img src="shoe.png" alt="Nike Air">
<h3>Details about the product</h3>
<p>More info about Nike Air</p>
<button>View More</button>
</div>
</div>
</div>
</body>
</html>
Step 2: CSS Styling
Next, we will style our product card to add the flipping effect. Create a CSS file named styles.css and add the following code:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
color: #fff;
font-family: Arial, sans-serif;
}
.card {
perspective: 1000px;
}
.card-inner {
position: relative;
width: 300px;
height: 400px;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card:hover .card-inner {
transform: rotateY(180deg);
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 16px;
}
.card-front {
background: linear-gradient(45deg, #00c6ff, #0072ff);
}
.card-back {
background: linear-gradient(45deg, #ff416c, #ff4b2b);
transform: rotateY(180deg);
}
.card img {
width: 100px;
margin-top: 20px;
}
h3, p {
margin: 10px 0;
}
button {
margin-top: 20px;
padding: 10px 20px;
border: none;
border-radius: 20px;
background: #fff;
color: #000;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: #ddd;
}
Step 3: Adding Multiple Cards
To add multiple cards, simply duplicate the card div in the HTML file and update the details accordingly. Here's an example with three cards:
<div class="card-container">
<div class="card">
<div class="card-inner">
<div class="card-front">
<img src="shoe.png" alt="Nike Air">
<h3>Nike Air (Women)<br>Size 7</h3>
<p>Price £199.99</p>
<button>Add to basket</button>
</div>
<div class="card-back">
<img src="shoe.png" alt="Nike Air">
<h3>Details about the product</h3>
<p>More info about Nike Air</p>
<button>View More</button>
</div>
</div>
</div>
<div class="card">
<div class="card-inner">
<div class="card-front">
<img src="shoe.png" alt="Nike Air">
<h3>Nike Air (Men)<br>Size 10</h3>
<p>Price £99.99</p>
<button>Add to basket</button>
</div>
<div class="card-back">
<img src="shoe.png" alt="Nike Air">
<h3>Details about the product</h3>
<p>More info about Nike Air</p>
<button>View More</button>
</div>
</div>
</div>
<div class="card">
<div class="card-inner">
<div class="card-front">
<img src="shoe.png" alt="Nike Air">
<h3>Nike Air (Women)<br>Size 8</h3>
<p>Price £399.99</p>
<button>Add to basket</button>
</div>
<div class="card-back">
<img src="shoe.png" alt="Nike Air">
<h3>Details about the product</h3>
<p>More info about Nike Air</p>
<button>View More</button>
</div>
</div>
</div>
</div>
And update the CSS to center the cards:
.card-container {
display: flex;
gap: 20px;
}
Conclusion
You've now created a stylish product card with a flip effect that shows additional information on hover. This tutorial covered the basics of HTML and CSS to achieve this effect. Feel free to customize the design and functionality to fit your needs. Happy coding!
For more tutorials and coding tips, visit codeswithpankaj.com
Top comments (0)