Create a Card Flip on Hover Animation using HTML and CSS

Pure CSS Card Flip on Hover Animation

Card flip on hover animation using CSS is a great way to add an engaging and interactive element to your website. This animation creates a flip effect on a card when it is hovered over, revealing additional content or information on the other side of the card. By using simple HTML and CSS, you can create a visually appealing and dynamic element that will capture your audience’s attention. In this tutorial, we will go step by step to create a card flip on hover animation using CSS.

Author

• TechieBundle
• March 25, 2023

Live Demo

• Demo

Code

You can check the code used in the demo below which you can also use in your projects.

HTML

First, let’s create the HTML structure for the card. We’ll use two div elements to represent the front and back of the card.

<!-- tb is acronym for TechieBundle -->
<div class="tb-card-wrapper">
  <div class="tb-card-inner">
    <div class="tb-card-front">
      <div class="tb-card-content">
        <img src="//techiebundle.com/wp-content/uploads/2022/12/techiebundle-white-1-1.png" alt="TechieBundle">
        <h1>TechieBundle</h1>
        <p>Web Development</p>
        <p>HTML | CSS</p>
        <p>Card Flip</p>
      </div>
    </div>
    <div class="tb-card-rear"></div>
  </div>
</div>

CSS

Next, we’ll style the card using CSS. We’ll use the transform property to create the card flip animation.

html,
body {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  background: #8e9eab;
  /* fallback for old browsers */
  background: #02aab0;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #00cdac, #02aab0);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #00cdac, #02aab0);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* tb is acronym for TechieBundle */
.tb-card-wrapper {
  background-color: transparent;
  width: 350px;
  height: 350px;
  perspective: 1000px;
  cursor: pointer;
}
.tb-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  border-radius: 16px;
}
.tb-card-wrapper:hover .tb-card-inner {
  transform: rotateY(180deg);
}
.tb-card-front,
.tb-card-rear {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.tb-card-front {
  background-color: #f4f4f4;
  color: #2f2f2f;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tb-card-rear {
  background-image: url("//techiebundle.com/wp-content/uploads/2022/12/techiebundle-white-1-1.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #f4f4f4;
  transform: rotateY(180deg);
  color: #2f2f2f;
  border-radius: 16px;
}
.tb-card-content > p {
  font-weight: 600;
}
.tb-card-content > h1 {
  font-size: 36px;
  font-weight: 600;
  margin: 0;
}
img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 1em;
}

Explanation:

• The .tb-card-wrapper class is used to set the position, size, and perspective of the card. The perspective property is used to create a 3D effect.
• The .tb-card-front and .tb-card-rear classes are used to style the front and back of the card. The backface-visibility property is used to hide the back of the card when it’s facing forward. The transition property is used to animate the card flip.
• The .tb-card-wrapper:hover .tb-card-inner classes are used to trigger the animation when the card is hovered over. The transform property is used to rotate the card around the Y-axis.

That’s it! You should now have a stunning Card Flip on Hover Animation using HTML and CSS. Feel free to customize the colors, fonts, and sizes to match your design.

Technologies Used

• HTML / CSS

About the code

Compatible browsers:- Chrome, Edge, Firefox, Opera, Safari

Responsive:- Yes

Dependencies: – N/A

Conclusion

In conclusion, the Stunning Card Flip on Hover Animation is a great way to add a stunning visual effect to your web page. By using simple HTML and CSS, you can create a beautiful and interactive card that flips over on hover. This animation is perfect for showcasing information, images, or products on your website in a fun and engaging way. With a little bit of creativity, you can customize the colors, fonts, and sizes to match your website’s design. So, give it a try and add this amazing effect to your website today!

Also Check: Material Radio Button using Pure HTML and CSS