How to create Modern Flip Card using CSS
Before We Start
Every developer needs clean and modern elements to develop their websites, It contains pictures and a user interface element within a website. The most important one and the first section that the user sees when the user enters a website. How to create Modern Flip Card using CSS
So if you are a person who wishes to develop a website, you have to know how to create that properly.
How to create Modern Flip Card using CSS
We are here to solve your problem. In this article we discuss how to create these elements. Before we start please read the below articles which easier you to understand the process, if you are new to development.
Step 1 – Add HTML
It’s too easy and simple. Just copy and paste below code in your HTML editor between <body> </body> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>modern flip card</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="card.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-lg-4">
<div class="card">
<label for="card1" aria-hidden="true" class="d-block w-100 h-100">
<input type="checkbox" id="card1" class="more" aria-hidden="true">
<div class="content">
<div class="front" style="background-image: url('https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg')">
<div class="inner position-relative text-center">
</div>
<div class="caption text-center">
<h3>IMAGINE DRAGONS</h3>
</div>
</div>
<div class="back">
<ul class="nav justify-content-center nav-justified" role="tablist">
<li class="nav-item active">
<a class="nav-link show" href="#bio" role="tab" data-toggle="tab">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#album" role="tab" data-toggle="tab">Albums</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#songs" role="tab" data-toggle="tab">Songs</a>
</li>
</ul>
<div class="tab-content ">
<div role="tabpanel" class="tab-pane fade show active" id="bio">
<div class="bio">
<h3 id="bio_title">IMAGINE DRAGONS</h3>
<span id="bio_description">
Imagine Dragons is an alternative-rock band from Las Vegas, Nevada. Band members include frontman Dan Reynolds, bassist Ben McKee, guitarist Wayne Sermon, and drummer Daniel Platzman.
</span>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="album">
<div class="bio inline">
<div class="row text-center">
<div class="col">
<div>
<img class="" src='./images/Ellipse%201.png' width="80"/>
</div>
<div>
<span class="" id="albums_title">Albums</span>
</div>
</div>
<div class="col">
<div>
<img class="" src='./images/Ellipse%201.png' width="80"/>
</div>
<div>
<span class="" id="albums_title">Albums</span>
</div>
</div>
<div class="col">
<div>
<img class="" src='./images/Ellipse%201.png' width="80"/>
</div>
<div>
<span class="" id="albums_title">Albums</span>
</div>
</div>
<div class="col">
<div>
<img class="" src='./images/Ellipse%201.png' width="80"/>
</div>
<div>
<span class="" id="albums_title">Albums</span>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="songs">
<div class="songs">
<div class="row">
<div class="col">
<ul class="list-group list-group-flush list-unstyled">
<li class="list-group-item">
<div class="row">
<div class="col-4 ">
<img class="p-1" src='./images/Rectangle%2018@2x.png'
width="80" height="90"/>
</div>
<div class="col-8 text-left">
<div class="d-flex">
<span > Thunder</span>
<small class="ml-auto">4:05 min</small>
</div>
<small>Origins - Imagine Dragons</small>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-4 ">
<img class="p-1" src='./images/Rectangle%2019@2x.png'
width="80"/>
</div>
<div class="col-8 text-left">
<div class="d-flex">
<span > Demons</span>
<small class="ml-auto">4:05 min</small>
</div>
<small>Smoke & Mirrors - Imagine Dragons</small>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-4">
<img class="p-1" src='./images/Rectangle%2020.png'
width="80"/>
</div>
<div class="col-8 text-left">
<div class="d-flex">
<span > Night Visions</span>
<small class="ml-auto">4:05 min</small>
</div>
<small>Imagine Dragons</small>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</label>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="card">
<label for="card2" aria-hidden="true" class="d-block w-100 h-100">
<input type="checkbox" id="card2" class="more" aria-hidden="true">
<div class="content">
<div class="front" style="background-image: url('https://images.pexels.com/photos/814499/pexels-photo-814499.jpeg')">
<div class="inner position-relative text-center">
</div>
<div class="caption text-center">
<h3>IMAGINE DRAGONS</h3>
</div>
</div>
<div class="back">
<ul class="nav justify-content-center nav-justified" role="tablist">
<li class="nav-item active">
<a class="nav-link show" href="#bio2" role="tab" data-toggle="tab">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#album2" role="tab" data-toggle="tab">Albums</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#songs2" role="tab" data-toggle="tab">Songs</a>
</li>
</ul>
<div class="tab-content ">
<div role="tabpanel" class="tab-pane fade show active" id="bio2">
<div class="bio">
<h3 id="bio_title">IMAGINE DRAGONS</h3>
<span id="bio_description">
Imagine Dragons is an alternative-rock band from Las Vegas, Nevada. Band members include frontman Dan Reynolds, bassist Ben McKee, guitarist Wayne Sermon, and drummer Daniel Platzman.
</span>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="album2">
<div class="bio inline">
<div class="row text-center">
<div class="col">
<div>
<img class="" src='./images/Ellipse%201.png' width="80"/>
</div>
<div>
<span class="" id="albums_title">Albums</span>
</div>
</div>
<div class="col">
<div>
<img class="" src='./images/Ellipse%201.png' width="80"/>
</div>
<div>
<span class="" id="albums_title">Albums</span>
</div>
</div>
<div class="col">
<div>
<img class="" src='./images/Ellipse%201.png' width="80"/>
</div>
<div>
<span class="" id="albums_title">Albums</span>
</div>
</div>
<div class="col">
<div>
<img class="" src='./images/Ellipse%201.png' width="80"/>
</div>
<div>
<span class="" id="albums_title">Albums</span>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="songs2">
<div class="songs">
<div class="">
<div class="col">
<ul class="list-group list-group-flush list-unstyled">
<li class="list-group-item">
<div class="row">
<div class="col-4 ">
<img class="p-1" src='./images/Rectangle%2018@2x.png'
width="80" height="90"/>
</div>
<div class="col-8 text-left">
<div class="d-flex">
<span > Thunder</span>
<small class="ml-auto">4:05 min</small>
</div>
<small>Origins - Imagine Dragons</small>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-4 ">
<img class="p-1" src='./images/Rectangle%2019@2x.png'
width="80"/>
</div>
<div class="col-8 text-left">
<div class="d-flex">
<span > Demons</span>
<small class="ml-auto">4:05 min</small>
</div>
<small>Smoke & Mirrors - Imagine Dragons</small>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-4">
<img class="p-1" src='./images/Rectangle%2020.png'
width="80"/>
</div>
<div class="col-8 text-left">
<div class="d-flex">
<span > Night Visions</span>
<small class="ml-auto">4:05 min</small>
</div>
<small>Imagine Dragons</small>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</label>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="card">
<label for="card3" aria-hidden="true" class="d-block w-100 h-100">
<input type="checkbox" id="card3" class="more" aria-hidden="true">
<div class="content">
<div class="front" style="background-image: url('https://images.pexels.com/photos/257840/pexels-photo-257840.jpeg')">
<div class="inner position-relative text-center">
</div>
<div class="caption text-center">
<h3>IMAGINE DRAGONS</h3>
</div>
</div>
<div class="back">
<ul class="nav justify-content-center nav-justified" role="tablist">
<li class="nav-item active">
<a class="nav-link show" href="#bio3" role="tab" data-toggle="tab">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#album3" role="tab" data-toggle="tab">Albums</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#songs3" role="tab" data-toggle="tab">Songs</a>
</li>
</ul>
<div class="tab-content ">
<div role="tabpanel" class="tab-pane fade show active" id="bio3">
<div class="bio">
<h3 id="bio_title">IMAGINE DRAGONS</h3>
<span id="bio_description">
Imagine Dragons is an alternative-rock band from Las Vegas, Nevada. Band members include frontman Dan Reynolds, bassist Ben McKee, guitarist Wayne Sermon, and drummer Daniel Platzman.
</span>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="album3">
<div class="bio inline">
<div class="row text-center">
<div class="col">
<div>
<img class="" src='./images/Ellipse%201.png' width="80"/>
</div>
<div>
<span class="" id="albums_title">Albums</span>
</div>
</div>
<div class="col">
<div>
<img class="" src='./images/Ellipse%201.png' width="80"/>
</div>
<div>
<span class="" id="albums_title">Albums</span>
</div>
</div>
<div class="col">
<div>
<img class="" src='./images/Ellipse%201.png' width="80"/>
</div>
<div>
<span class="" id="albums_title">Albums</span>
</div>
</div>
<div class="col">
<div>
<img class="" src='./images/Ellipse%201.png' width="80"/>
</div>
<div>
<span class="" id="albums_title">Albums</span>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="songs3">
<div class="songs">
<div class="">
<div class="col">
<ul class="list-group list-group-flush list-unstyled">
<li class="list-group-item">
<div class="row">
<div class="col-4 ">
<img class="p-1" src='./images/Rectangle%2018@2x.png'
width="80" height="90"/>
</div>
<div class="col-8 text-left">
<div class="d-flex">
<span > Thunder</span>
<small class="ml-auto">4:05 min</small>
</div>
<small>Origins - Imagine Dragons</small>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-4 ">
<img class="p-1" src='./images/Rectangle%2019@2x.png'
width="80"/>
</div>
<div class="col-8 text-left">
<div class="d-flex">
<span > Demons</span>
<small class="ml-auto">4:05 min</small>
</div>
<small>Smoke & Mirrors - Imagine Dragons</small>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-4">
<img class="p-1" src='./images/Rectangle%2020.png'
width="80"/>
</div>
<div class="col-8 text-left">
<div class="d-flex">
<span > Night Visions</span>
<small class="ml-auto">4:05 min</small>
</div>
<small>Imagine Dragons</small>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</label>
</div>
</div>
</div>
</div>
</body>
<script>
$('li > a').on('click', function () {
$('li').removeClass();
$('li').addClass('nav-item');
$(this).parent().addClass('nav-item active');
});
</script>
</html>
Step 2 – Add CSS
Copy and paste below code in your HTML editor between <style></style> tag.
<style>
a{
color: #354067;
letter-spacing:1px;
margin-left: 20px;
}
a:hover{
text-decoration: none;
color: red;
}
#nav { text-align: center; }
ul{
text-align: center;
}
.card {
height: 340px;
margin: 1em;
perspective: 1500px;
}
.card .content {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(0.75, 0, 0.85, 1);
}
.more {
display: none;
}
.more:checked ~ .content {
transform: rotateY(180deg);
}
.active a{
color: red;
border-bottom: 2px solid red !important;
padding-bottom: 14px;
}
.front, .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
transform-style: preserve-3d;
border-radius: 6px;
}
.front .inner, .back .inner {
height: 100%;
display: flex;
transform: translateZ(80px) scale(1);
}
.front {
background-color: #fff;
background-size: cover;
background-position: center;
background-image: linear-gradient(to bottom,
rgba(255, 255, 255, 50),
rgba(255, 255, 255, 50)
100%);
}
.front:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
border-radius: 6px;
backface-visibility: hidden;
}
.front h2 {
grid-row: 2;
margin-bottom: 0.3em;
text-transform: uppercase;
letter-spacing: 3px;
color: #fff;
font-weight: 500;
text-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}
.back {
transform: rotateY(180deg);
background-color: #fff;
border: 2px solid #f0f0f0;
}
.back .info {
position: relative;
display: flex;
align-items: center;
color: #355cc9;
grid-row: 3;
}
.back .info:not(:first-of-type):before {
content: '';
position: absolute;
left: -0.9em;
height: 18px;
width: 1px;
background-color: #ccc;
}
.back .info span {
font-size: 2em;
font-weight: 700;
}
.back .info i {
font-size: 1.2em;
}
.back .info .icon {
margin-left: 0.3em;
}
.back .info .icon span {
display: block;
margin-top: -0.25em;
font-size: 0.8em;
font-weight: 600;
white-space: nowrap;
}
.back .description {
width: 100% !important;
grid-column: -1;
font-size: 0.86em;
border-radius: 5px;
font-weight: 600;
line-height: 1.4em;
overflow: auto;
color: #355cc9;
padding-right: 10px;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #859ddf;
}
::-webkit-scrollbar-thumb:hover {
background: #355cc9;
}
.bio {
margin: 15px;
color: #354067;
}
.songs{
margin-top: 15px;
color: #354067;
}
.bio #bio_title
{
color: #354067;
}
.bio #bio_description
{
font-size:12px ;
}
#songs{
margin: 15px;
color: #354067;
}
.card label {
cursor: pointer;
}
.caption {
position: absolute;
top: 80%;
left: 0;
width: 100%;
color: white;
}
.nav a{
margin: 0px;
}
</style>
At the end we will have something like this. You can change fonts, colors, backgrounds and all things that you want. Enjoy it.
Your Output
Your Output
Video Tutorial
Please watch this video to better understand this tutorial and don’t forget to subscribe to our channel.
Help others to find out about this article on Social Media sites. If you have any doubt or any problem, don’t hesitate to contact us. Thereafter we will be able to help you and also make sure you bookmark our site on your browser.
