Are you looking to add an interactive and engaging element to your website? Implementing a flip card effect can significantly enhance user experience by presenting information dynamically. This tutorial will guide you through creating a captivating flip card on click using JavaScript. You will learn how to build cards that reveal hidden content when clicked, making your web pages more interactive and visually appealing. This technique is perfect for portfolios, product displays, or any content requiring a compact, engaging reveal.
How to Create a Flip Card on Click using JavaScript
Step 1: Include Essential Assets
First, you need to add external CSS and font links to your HTML document. These links ensure proper styling and font rendering for your flip cards. Place these within the <head> tag of your HTML.
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Oswald:500,600" rel="stylesheet"><link rel="stylesheet" href="https://public.codepenassets.com/css/normalize-5.0.0.min.css">
Step 2: Structure Your Flip Cards with HTML
Next, create the basic structure for your flip cards using HTML. Each card will have a front and a back side, allowing for the dynamic flip effect. We will create three example cards.
<div class="cardContainer inactive">
<div class="card">
<div class="side front">
<div class="img img1"></div>
<div class="info">
<h2>Super S</h2>
<p>A stand-on with an exceptional compact stance. Great for tight spaces and trailering.</p>
</div>
</div>
<div class="side back">
<div class="info">
<h2>At a glance</h2>
<div class="reviews">
<svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs><path d="M0 0h24v24H0V0z" id="a"/></defs><clipPath id="b"><use overflow="visible" xlink:href="#a"/></clipPath><path clip-path="url(#b)" d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4V6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/>
</svg>
<p>23 Reviews</p>
</div>
<ul>
<li>Manage backyard gates with ease with the 36" deck option</li>
<li>Your choice of deck sizes ranging from 36", 48", 52" and 60"</li>
<li>Updated hip bolstering offers superior operator comfort and positioning</li>
</ul>
<div class="btn">
<h4>Learn More</h4>
<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>
</div>
</div>
</div>
</div>
</div>
<div class="cardContainer inactive">
<div class="card">
<div class="side front">
<div class="img img2"></div>
<div class="info">
<h2>Super Z HyperDrive</h2>
<p>A high-performance zero-turn with unsurpassed strength, speed & reliability with a warranty to match.</p>
</div>
</div>
<div class="side back">
<div class="info">
<h2>At a glance</h2>
<div class="reviews">
<svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<p>39 Reviews</p>
</div>
<ul>
<li>Your choice of VX4 decks ranging from 60 to 72 inches</li>
<li>The 37hp Vanguard BigBlock EFI makes short work out of big jobs enabling speeds up to 16mph</li>
<li>Massive 24" drive tires and 13" front caster tires</li>
</ul>
<div class="btn">
<h4>Learn More</h4>
<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>
</div>
</div>
</div>
</div>
</div>
<div class="cardContainer inactive">
<div class="card">
<div class="side front">
<div class="img img3"></div>
<div class="info">
<h2>Vanguard Power</h2>
<p>If you need a tough, commercial grade engine that makes you more productive, look to Vanguard.</p>
</div>
</div>
<div class="side back">
<div class="info">
<h2>At a glance</h2>
<div class="reviews">
<svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<p>26 Reviews</p>
</div>
<ul>
<li>V-Twin OHV Technology provides superior balance, low vibration, lower emissions, better fuel economy and higher HP/Weight</li>
<li>Advanced Debris Management keeps engine clean and cool for enhanced durability and performance</li>
</ul>
<div class="btn">
<h4>Learn More</h4>
<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>
</div>
</div>
</div>
</div>
</div>
<script src="./script.js"></script>
Step 3: Style Your Flip Cards with CSS
Now, apply the necessary CSS styles to bring your flip cards to life. This styling includes transitions for the flip effect, card dimensions, and visual appearance for both the front and back sides. This will create the visual magic of the flip.
*, *:after, *:before {
box-sizing: border-box;
}
h2, h4, p, ul, li {
margin: 0;
padding: 0;
}
h2, h4 {
font-family: "Oswald", sans-serif;
text-transform: uppercase;
color: #333333;
}
h2 {
font-size: 27px;
font-weight: 500;
letter-spacing: -0.2px;
margin-bottom: 10px;
}
p, li {
font-family: "Roboto", sans-serif;
font-weight: 400;
color: #555;
line-height: 22px;
}
ul, li {
text-decoration: none;
list-style: disc outside;
}
ul {
padding-left: 20px;
}
svg {
margin: 0px;
min-width: 24px;
min-height: 24px;
}
body {
background-color: #dadce2;
background-image: linear-gradient(140deg, white, #dadce2);
margin: 0;
width: 100vw;
min-height: 450px;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.cardContainer {
position: relative;
width: 300px;
height: 400px;
min-width: 300px;
min-height: 400px;
margin: 4px;
perspective: 1000px;
}
.active {
transform: translateZ(0px) rotateY(180deg) !important;
}
.active:after {
display: none;
}
.card {
display: inline-block;
width: 100%;
height: 100%;
cursor: pointer;
-moz-backface-visibility: hidden;
transform-style: preserve-3d;
transform: translateZ(-100px);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.card:after {
content: "";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
border-radius: 5px;
box-shadow: 0 14px 50px -4px rgba(0, 0, 0, 0.15);
opacity: 0;
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1.4);
}
.card:hover {
transform: translateZ(0px);
}
.card:hover:after {
opacity: 1;
}
.card .side {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
width: 100%;
height: 100%;
border-radius: 5px;
background-color: white;
}
.card .front {
z-index: 2;
}
.card .back {
transform: rotateY(180deg);
}
.card .info {
padding: 16px;
}
.front .img {
background-color: #dadce2;
background-position: center;
background-size: cover;
border-radius: 5px 5px 0 0;
width: 100%;
height: 250px;
}
.front .img1 {
background-image: url(http://i.imgur.com/1aE1nMA.jpg);
}
.front .img2 {
background-image: url(http://i.imgur.com/2p9VXAn.jpg);
}
.front .img3 {
background-image: url(http://i.imgur.com/I5ABT2v.jpg);
}
.back {
position: relative;
}
.back h2 {
margin-top: 6px;
margin-bottom: 18px;
}
.back .reviews {
display: flex;
align-items: center;
margin-bottom: 12px;
cursor: pointer;
}
.back .reviews p {
color: #c4c4c4;
font-weight: 300;
margin: 1px 0 0 6px;
transition: 0.3s ease-in-out;
}
.back .reviews:hover p {
color: #555;
}
.back li {
line-height: 22px;
margin: 2px 0 6px 0;
}
.back .btn {
position: absolute;
bottom: 16px;
width: calc(100% - 32px);
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background-color: #FFC324;
background-image: linear-gradient(-90deg, #FFB714, #FFE579);
border-radius: 5px;
cursor: pointer;
}
.back .btn:hover h4 {
transform: translateX(0px);
}
.back .btn:hover svg {
transform: translateX(0px);
opacity: 1;
}
.back .btn h4 {
transform: translateX(12px);
transition: transform 0.3s ease-out;
}
.back .btn svg {
margin: 1px 0 0 4px;
transform: translateX(-8px);
opacity: 0;
transition: all 0.3s ease-out;
}
Step 4: Add Interactivity with JavaScript
Finally, incorporate JavaScript to enable the flip action when a card is clicked. This script targets each card and toggles a class that controls its rotation. Add this code to a file named `script.js`.
const cards = document.querySelectorAll('.card');
function transition() {
if (this.classList.contains('active')) {
this.classList.remove('active');
} else {
this.classList.add('active');
}
}
cards.forEach(card => card.addEventListener('click', transition));
Step 5: Link Your JavaScript File
To make the JavaScript code functional, you need to link your `script.js` file to your HTML document. It is best practice to place this script link just before the closing </body> tag for optimal performance.
That’s all! Hopefully, you have successfully created an interactive flip card on click using JavaScript.
