Bootstrap Flip on Hover Cards

This code snippet helps you to create a flip on hover cards using bootstrap. It represents three card containers, each containing a card element with a front and backside. The front side of each card contains an icon, and the back side contains a text label describing the icon. This code can be used to create an interactive element that allows the user to click or tap on the front of the card to reveal the label on the backside.

It could be used in a variety of contexts, such as a navigation menu or settings page, where the user needs to select an option from a list.

Now it’s time to create our project.

How to Create Bootstrap Flip on Hover Cards

First of all, load the following assets into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

Create the HTML structure for the flip card as follows:

<div class="card-container">
  <div class="card">
    <div class="front">
      <span class="fa fa-user"></span>
    </div>
    <div class="back">User</div>
  </div>
</div>
<div class="card-container">
  <div class="card">
    <div class="front">
      <span class="fa fa-cogs"></span>
    </div>
    <div class="back">Settings</div>
  </div>
</div>
<div class="card-container">
  <div class="card">
    <div class="front">
      <span class="fa fa-code"></span>
    </div>
    <div class="back">Code</div>
  </div>
</div>

Now, style our project using the following CSS styles:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to left, #517fa4, #243949);
  font-family: Open Sans;
}

.card-container {
  perspective: 900px;
  margin-right: 20px;
}

.card {
  position: relative;
  width: 100px;
  height: 100px;
  transition: all 0.6s ease;
  transform-style: preserve-3d;
}

.front, .back {
  position: absolute;
  background: #7FC6A4;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  color: white;
  box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(0, 0, 0, 0.15);
  backface-visibility: hidden;
}

.front {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}

.back {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

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

.back {
  transform: rotateY(180deg);
}

Load the following scripts before closing the body tag:

<script src='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'></script>

That’s all! hopefully, you have successfully created our project. If you have any questions or suggestions, feel free to comment below.