How to create: flip card

How to create a flip card

Step 1 - Add HTML:

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>Bill Gates</h1>
      <p>Architect & Engineer</p>
      <p>We love that guy</p>
    </div>
  </div>
</div>

Step 2 - Add CSS:

/* Container for the flip card - set the desired width and height. We added the border property to demonstrate that the flip extends beyond the container when hovering (remove the perspective if you do not want 3D effects) */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove if you do not want 3D effects */
}
/* This container is used to position the front and back */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
/* Perform a horizontal flip when the mouse hovers over the flip card container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
/* Position the front and back */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}
/* Set the style for the front (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}
/* Set the style for the back */
.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

Try it yourself