Want to add a nice modern interactive UI element to your website? Flip cards can do just that! They are pleasing to eye and offers an impressive and stylish format to present your content (like information about products, profiles about your team, highlighted services, etc). In this tutorial, we are going to create a nice flip card effect with just HTML and CSS – no JavaScript needed.

What is a Flip Card?

A flip card is a container that shows a different side when hovered or clicked. It has a 3D card flip animation that gives depth to the user experience as well as dynamism and professionalism to your website.

Html

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="image.png" />
    </div>
    <div class="flip-card-back">
      <img src="image.png" />
      <h1>Wireless Headphones</h1>
      <h3>₹249.90</h3>
    </div>
  </div>
</div>

Css

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 16px;
}

.flip-card-front {
  background-image: linear-gradient(45deg, #ff004d, #8b00ff);
}

.flip-card-front img {
  width: 220px;
  margin-top: 1rem;
}

.flip-card-back {
  background-image: linear-gradient(315deg, #ff004d, #8b00ff);
  color: #ffffff;
  transform: rotateY(180deg);
}

.flip-card-back img {
  width: 140px;
  margin-top: 1rem;
}

.flip-card-back h3 {
  margin-bottom: 0.3rem;
}

.flip-card-back h1 {
  margin: 0;
}