Hello Readers, Today in this article we will show you how to create a Glassmorphism 3D Flip Card UI Design using HTML and CSS. This type of Glassmorphism CSS Card Hover Effects is used on the websites for Box and Testimonial.
You easily create Glassmorphism Card Hover Effects Using HTML and CSS only without any jQuery then this article will definitely help you. For this, you need to have an idea about basic HTML and CSS then you can understand the following codes. It is designed in a completely modern way.
Some information about this CSS 3D Flip Card
This is Glassmorphism Credit Card. This credit card both site showing front and back. normally show front site when hover this credit card then, flip the card and show back part. There have used chip like a real credit card. below I have provided an image chip.
Watch the video tutorial to create CSS Card Hover Effects
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made this CSS Card Hover Effects step by step completely beautifully. So you can learn how to make these CSS Card Hover Effect. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this video CSS Card Hover Effects Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- Awesome Search Bar Using HTML & CSS
- How To Create Accordion Menu using HTML & CSS
- Vertical Image Slider Using HTML, CSS and javaScript
CSS Card Hover Effects | Source Codes
You have to create HTML & CSS File For this menu. After creating these files just paste the following codes into your file.
The First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension. You’ve to download files from the given download button to use images also.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Glass morphism 3D Flip Debit Card UI Design</title>
<!----CSS link----->
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<div class="card">
<div class="face front">
<h3 class="debit">Debit Card</h3>
<h3 class="bank">Bank Name</h3>
<img src="https://img.icons8.com/plasticine/100/000000/sim-card-chip.png" class="chip">
<h3 class="number">0123 4567 8901 2345</h3>
<h5 class="valid"><span>Valid<br>Thru</span><span>10/23</span></h5>
<h5 class="cardHolder">Mir Soyel</h5>
</div>
<div class="face back">
<div class="blackbar"></div>
<div class="ccvtext">
<h5>Authorized Signature not valid unless signed</h5>
<div class="whitebar"></div>
<div class="ccv">123</div>
</div>
<p class="text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quo a commodi voluptatibus beatae perferendis tempora officia esse, consectetur, iusto illo suscipit labore, quasi sint recusandae et nostrum omnis cumque. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quo a commodi voluptatibus beatae</p>
</div>
</div>
</section>
</body>
</html>Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:[email protected]&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
overflow: hidden;
}
section{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #1a1a1a;
}
section::before{
content: '';
position: absolute;
bottom: -40%;
left: 40%;
width: 600px;
height: 600px;
background: linear-gradient(#f00, #f0f);
border-radius: 50%;
}
.card{
position: relative;
width: 510px;
height: 310px;
transform-style: preserve-3d;
perspective: 500px;
}
.card .face{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 15px 35px rgba(0,0,0,0.5);
border-radius: 15px;
background: rgba(255,255,255,0.05);
backdrop-filter: blur(10px);
transform-style: preserve-3d;
transition: 1s;
backface-visibility: hidden;
}
.card:hover .face.front{
transform: rotateY(180deg);
}
.card .face.back{
transform: rotateY(180deg);
}
.card:hover .face.back{
transform: rotateY(360deg);
}
.card .face.front::before{
content: '';
position: absolute;
bottom: 40px;
right: 40px;
width: 60px;
height: 60px;
background: #fff;
border-radius: 50%;
opacity: 0.5;
}
.card .face.front::after{
content: '';
position: absolute;
bottom: 40px;
right: 80px;
width: 60px;
height: 60px;
background: #fff;
border-radius: 50%;
opacity: 0.7;
}
.card .face.front .debit{
position: absolute;
left: 40px;
top: 30px;
color: #fff;
font-weight: 500;
}
.card .face.front .bank{
position: absolute;
right: 40px;
top: 25px;
color: #fff;
font-weight: 500;
font-style: italic;
font-size: 24px;
}
.card .face.front .chip{
position: absolute;
top: 80px;
left: 50px;
max-width: 64px;
}
.card .face.front .number{
position: absolute;
bottom: 130px;
left: 40px;
color: #fff;
font-weight: 500;
letter-spacing: 6px;
font-size: 18px;
text-shadow: 0 2px 1px #0005;
font-family: 'Orbitron', sans-serif;
}
.card .face.front .valid{
position: absolute;
bottom: 90px;
left: 40px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-weight: 300;
line-height: 1em;
text-align: right;
}
.card .face.front .valid span:last-child{
margin-left: 20px;
font-size: 16px;
font-weight: 400;
letter-spacing: 2px;
}
.card .face.front .cardHolder{
position: absolute;
bottom: 40px;
left: 40px;
color: #fff;
font-size: 16px;
letter-spacing: 2px;
}
.card .face.back .blackbar{
position: absolute;
top: 40px;
width: 100%;
height: 60px;
background: #000;
}
.card .face.back .ccvtext{
position: absolute;
top: 120px;
left: 30px;
}
.card .face.back .ccvtext h5{
color: #fff;
font-weight: 400;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
}
.card .face.back .ccvtext .whitebar{
position: relative;
width: 400px;
height: 40px;
background: #fff;
margin-top: 5px;
}
.card .face.back .ccvtext .ccv{
position: relative;
top: -35px;
left: 395px;
background: #ccc;
color: #111;
width: 50px;
height: 30px;
font-weight: 600;
letter-spacing: 3px;
display: flex;
justify-content: center;
align-items: center;
}
.card .face.back .text{
position: absolute;
bottom: 30px;
left: 30px;
right: 30px;
color: #fff;
font-size: 10px;
line-height: 1.4em;
font-weight: 300;
}now you’ve successfully created this CSS Card Hover Effects Tutorial using HTML and CSS. If your code does not work or facing any error/problem to comment down or contact us through the contact page. download chip image just clicks this button.
