Create a Animated Product Card using HTML CSS & JavaScript.

Create a Animated Product Card using HTML CSS & JavaScript.

Last Updated : 23 Jul, 2024

In this article, we dive into creating a simple animated product card using HTML, CSS, and JavaScript. Here we're going to create a product card with the product name and price. On hover, it flips and shows detailed information along with a buy button. These cards not only make the website visually appealing but also give more information regarding products within the allocated space on the web page.

Preview:

Screenshot-2023-11-13-at-101035-PM — On hover

Prerequisites:

Approach:

Start by structuring the HTML code of the product card. Create a new container element that represent the card itself. Inside this container, add two elements, one for the front side of the card having class name (". card-front") and other for the back side of the card having class name (". card-back").
The front part displays the basic information of the product like name and price, while the back part initially remains hidden. Ensure that the back part of the card remains hidden by default. Use "backface-visibility: hidden" for this purpose.

Apply a CSS transition property to the card to create a smooth animation when the card flips. This transition will affect the "transform" property. Set "transform" to "rotateY(180deg)" to achieve the side-flip effect when the card is hovered by the user.

When the user hovers over the card, adjust the "opacity" and "pointer-events" properties to reveal the back side. Set "opacity" to 1 and "pointer-events" to "auto".

In your JavaScript file (`script.js`), select the card element from your HTML document using "document.querySelector(". card")". Add event listeners to the card element to detect user interactions such as hovering.

Project Structure:

Screenshot-2023-11-13-at-100815-PM — Project structure

Example: Below example helps you create an animated product card using HTML, CSS and JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,
								initial-scale=1.0">
	<link rel="stylesheet" href="styles.css">
	<script src="script.js" defer></script>
	<title>Animated Product Card</title>
</head>

<body>
	<div class="card">
		<div class="card-inner">
			<div class="card-front">
				<h2>GeeksForGeeks</h2>
				<p>$99.99</p>
			</div>
			<div class="card-back">
				<h2>GeeksForGeeks</h2>
				<p>$99.99</p>
				<p>Product Details:</p>
				<p>You can show extra info here...</p>
				<button class="buy-button">Buy Now</button>
			</div>
		</div>
	</div>
</body>

</html>

CSS

/* styles.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.card {
    width: 300px;
    height: 400px;
    perspective: 1000px;
}

.card-inner {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.5s;
}

.card:hover .card-inner {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
}

.card-front {
    background: #f2f2f2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s;
}

.card-back {
    background: #1abc9c;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s;
    opacity: 0;
    pointer-events: none;
}

.card:hover .card-back {
    opacity: 1;
    pointer-events: auto;
}

.buy-button {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

JavaScript

// script.js
const card = document.querySelector('.card');

card.addEventListener('mouseover', function () {
    card.style.transform = 'scale(1.2)';
});

card.addEventListener('mouseout', function () {
    card.style.transform = 'scale(1)';
});

Output:

Create a Animated Product Card using HTML CSS & JavaScript.

H

hemanthbhb2001

Improve

Article Tags :

Similar Reads

Create a Toggle Profile Card Details using HTML CSS and JavaScript

In this article, we will develop an interactive Toggle Profile Card Details application using HTML, CSS, and JavaScript Language. In this application, we have a Card Component with the user's details like their profile picture and Name. There is a toggle button, and when the button is clicked, the d

How to create Expanding Cards using HTML, CSS and Javascript ?

Creating expanding cards using HTML, CSS, and JavaScript involves creating a set of cards that expand when clicked.ApproachSelection of Sections:The code starts by selecting all HTML elements with the class 'section' using the document.querySelectorAll('.section') method.This creates a NodeList cont

Create an Online Payment Project using HTML CSS & JavaScript

In this article, we will create a responsive online payment page using HTML, CSS & JavaScript.Here, we will learn about the project's structure before beginning to code each page individually. To ensure adequate understanding, we also gave the project's output after it was created.Prerequisites:

Build a Memory Card Game Using HTML CSS and JavaScript

A memory game is a type of game that can be used to test or check the memory of a human being. It is a very famous game. In this game, the player has some cards in front of him and all of them facing down initially. The player has to choose a pair of cards at one time and check whether the faces of

Creating a Personalized Greeting Card with HTML CSS and JavaScript

In this article, we are going to learn how to create a Personalized Greeting Card with HTML, CSS, and JavaScript.Output Preview:PrerequisitesHTMLCSSJavaScriptApproach:Create a JavaScript function called customizeCard.Utilize the prompt function to gather user input for a new greeting and a new messa