card hover animation – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Fri, 19 May 2023 18:05:23 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Flipping Card UI Design in HTML & CSS https://www.codingnepalweb.com/flipping-card-ui-design-html-css/ https://www.codingnepalweb.com/flipping-card-ui-design-html-css/#respond Mon, 24 Oct 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4153 Flipping Card UI Design in HTML & CSS

Hey buddy, I hope you are doing are creating an exciting project. Today I have brought a beautiful project for you. Bascially today you will learn to create a Card with Flipping Animation in HTML CSS and JavaScript. There are lots of other Card designs I have already created before.

A card is a section that can be square or rectangular and contains some vital information about a particular. Cards can be in various types like profile cards, product cards,s and the least goes on.

Take a look at the given image of our project [Flipping Card UI Design]. As you can see there are two beautiful gradients two balls and between them, there is a card with grassmorphism UI. In the card, there is a master card logo, chip, and some card owner details like card number, name, and the valid date of the card. The interesting part of this project is when you hover over the card it will flid and the back side of the card visible. On the back side of that card, I have added some other information as well.

To see the real demo of this card and how it flips and the back part of this card, you can watch the given video tutorial of this project [Flipping Card UI Design], that I have given below. After watching the given video tutorial, you also get the idea, of how all the HTML and CSS code is working behind it.

Flipping Card UI Design in HTML & CSS | Video Tutorial

I have provided all the HTML and CSS code that I have used to create this project [Flipping Card UI Design], before jumping into the source code file. I would like to briefly explain the given video.

As you have seen in the video tutorial of this project [Flipping Card UI Design]. At first on the screen we saw, there were two gradient balls. Between those two balls, there was our card with some basic information that debit cards need to have like name, card number, expiry date, and others. When I hover over the card, it flipped and the back part of the card visibled. On the back part, there is some other information that typical has.

As you have seen, how I created those two balls. the card and its UI design and the code that is used to flip it by using only HTML and CSS. I hope you also can create this type of card with flipping animation on hove by using HTML and CSS. If you are feeling difficulty to create this project [Flipping Card UI Design], I have provided all the HTML and CSS code and all the images that I have used to create this Card, which you can find below.

You May Like This:

Flipping Card UI Design [Source Codes]

To create a  Flipping Card UI Design using HTML and CSS, follow the given steps line by line:
  1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
  2. Create an index.html file. The file name must be index and its extension .html
  3. Create a style.css file. The file name must be style and its extension .css

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source codes of this Border Loading Animation by clicking on the given download button.

First, paste the following codes into your index.html file

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flipping Card UI Design</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <section>
      <div class="container">
        <div class="card front-face">
          <header>
            <span class="logo">
              <!--<img src="images/logo.png" alt="" />-->
              <h5>Master Card</h5>
            </span>
           <!--<img src="images/chip.png" alt="" class="chip" />-->
          </header>

          <div class="card-details">
            <div class="name-number">
              <h6>Card Number</h6>
              <h5 class="number">8050 2030 3020 5040</h5>
              <h5 class="name">Prem Kumar Shahi</h5>
            </div>

            <div class="valid-date">
              <h6>Valid Thru</h6>
              <h5>05/28</h5>
            </div>
          </div>
        </div>

        <div class="card back-face">
          <h6>
            For customer service call +977 4343 3433 or email at
            mastercard@gmail.com
          </h6>
          <span class="magnetic-strip"></span>
          <div class="signature"><i>005</i></div>
          <h5>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia
            maiores sed doloremque nesciunt neque beatae voluptatibus doloribus.
            Libero et quis magni magnam nihil temporibus? Facere consectetur
            dolore reiciendis et veniam.
          </h5>
        </div>
      </div>
    </section>
  </body>
</html>


/* Import Google Font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
section {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background: #121321;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  perspective: 1000px;
}
section::before {
  content: "";
  position: absolute;
  height: 240px;
  width: 240px;
  border-radius: 50%;
  transform: translate(-150px, -100px);
  background: linear-gradient(90deg, #9c27b0, #f3f5f5);
}
section::after {
  content: "";
  position: absolute;
  height: 240px;
  width: 240px;
  border-radius: 50%;
  transform: translate(150px, 100px);
  background: linear-gradient(90deg, #9c27b0, #f3f5f5);
}
.container {
  position: relative;
  height: 225px;
  width: 375px;
  z-index: 100;
  transition: 0.6s;
  transform-style: preserve-3d;
}
.container:hover {
  transform: rotateY(180deg);
}
.container .card {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 25px;
  border-radius: 25px;
  backdrop-filter: blur(25px);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backface-visibility: hidden;
}
.front-face header,
.front-face .logo {
  display: flex;
  align-items: center;
}
.front-face header {
  justify-content: space-between;
}
.front-face .logo img {
  width: 48px;
  margin-right: 10px;
}
h5 {
  font-size: 16px;
  font-weight: 400;
}
.front-face .chip {
  width: 50px;
}
.front-face .card-details {
  display: flex;
  margin-top: 40px;
  align-items: flex-end;
  justify-content: space-between;
}
h6 {
  font-size: 10px;
  font-weight: 400;
}
h5.number {
  font-size: 18px;
  letter-spacing: 1px;
}
h5.name {
  margin-top: 20px;
}
.card.back-face {
  border: none;
  padding: 15px 25px 25px 25px;
  transform: rotateY(180deg);
}
.card.back-face h6 {
  font-size: 8px;
}
.card.back-face .magnetic-strip {
  position: absolute;
  top: 40px;
  left: 0;
  height: 45px;
  width: 100%;
  background: #000;
}
.card.back-face .signature {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 80px;
  height: 40px;
  width: 85%;
  border-radius: 6px;
  background: repeating-linear-gradient(
    #fff,
    #fff 3px,
    #efefef 0px,
    #efefef 9px
  );
}
.signature i {
  color: #000;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 4px;
  background-color: #fff;
  margin-right: -30px;
  z-index: -1;
}
.card.back-face h5 {
  font-size: 8px;
  margin-top: 15px;
}
If you face any difficulties while creating your Credit Card or your code is not working as expected, you can download the source code files for this Card for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

 

View Live Demo

 

]]> https://www.codingnepalweb.com/flipping-card-ui-design-html-css/feed/ 0 Card Flipping Animation in HTML & CSS https://www.codingnepalweb.com/card-flipping-animation-html-css/ https://www.codingnepalweb.com/card-flipping-animation-html-css/#respond Thu, 04 Nov 2021 21:11:19 +0000 https://www.codingnepalweb.com/?p=4200 Create a Card with flipping Animation in HTML CSS

Hello friend, hope you are doing well, as you know I have been creating lots of JavaScript projects for several. That’s why today I’m thinking of a card with flipping animation by using HTML and CSS only. Actually, when you hover on it, the card will flip and we would see the backface of the card.

Let’s have a look at the given image of the card. The design of the card is, I have inspired by the famous web series squid game. The icons you are seeing on the image are made by HTML and CSS only, I have not used any font icons.

Basically, when you hover on the card flip with 3d animation and you can see the backside of this card. On the backside, I have added an icon and number. Rather than words, I highly recommend you to watch the full video tutorial of this 3D flipping card. Then you will know the real demo of this card and its animation.

Card with flipping Animation in HTML CSS | Video

I have provided all the HTML and CSS source code of this Card with 3D Flipping Animation, before jumping into the source code files, you need to know some basic points of this project.

As you have seen on the given video tutorial of Card with flipping Animation. At first, you saw a card with three icons, and when I hovered on the card it flips and we saw the backside of that card. As you know, how to make a triangle with a border, circle, square, and home icon by using only HTML and CSS.

I could bring that icon from websites like font awesome and others, but I thought to make it with HTML and CSS, which makes our program more interesting and adventurous.

You Might Like This:

Card with flipping Animation [Source Code]

To get the following HTML and CSS source code for Card with flipping Animation. You need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title> Card with Flip Animation | CodingLab </title>
    <link rel="stylesheet" href="style.css">
   </head>
<body>
  <div class="wrapper">
    <div class="flip-card">
      <div class="front card">
        <span class="circle"></span>
        <span class="triangle"></span>
        <span class="square"></span>
      </div>
      <div class="back card">
        <span class="home-logo">
          <span class="icon"></span>
        </span>
        <span class="num">8650 4006</span>
      </div>
    </div>
  </div>
</body>
</html>

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EED891;
}
.wrapper{
  position: relative;
  height: 330px;
  width: 620px;
  perspective: 1000px;
}
.wrapper .flip-card{
  position: relative;
  height: 100%;
  width: 100%;
  background: #D48600;
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
}
.wrapper:hover .flip-card{
  transform: rotateY(180deg);
}
.flip-card .card{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  background: #D48600;
  border-top: 2px solid #cc6600;
  border-left: 2px solid #cc6600;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  backface-visibility: hidden;
  position: absolute;
}
.card span.circle,
.card span.square{
  height: 110px;
  width: 110px;
  border: 10px solid #4d2600;
}
.card span.circle{
  border-radius: 50%;
}
.card span.triangle{
  position: relative;
  height: 0;
  width: 0;
  border-right: 60px solid transparent;
  border-left: 60px solid transparent;
  border-bottom: 110px solid #4d2600;
  margin-right: 16px;
}
.card span.triangle::before{
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  left: -40px;
  top: 20px;
  border-right: 40px solid transparent;
  border-left: 40px solid transparent;
  border-bottom: 80px solid #D48600;
}
.back.card{
  transform: rotateY(180deg);
}
.back.card .home-logo{
  position: relative;
  height: 65px;
  width: 65px;
  border: 5px solid #4d2600;
  border-radius: 50%;
  margin-right: 16px;
}
.home-logo .icon{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(6px);
  display: inline-block;
  height: 15px;
  width: 25px;
  background: #4d2600;
}
.home-logo .icon::before{
  content: "";
  position: absolute;
  top: -15px;
  height: 25px;
  width: 25px;
  background: #4d2600;
  transform: rotate(45deg);
}
.back.card .num{
  font-size: 25px;
  font-weight: 600;
  color: #4d2600;
}

 

]]> https://www.codingnepalweb.com/card-flipping-animation-html-css/feed/ 0