How To Create A Flip Box On Hover

In this topic,

We are going to see how to create a flip box on hover.

Step-1: Create Html Code in the index.html file.

<body>	
  <div class="main-hover-section">
    <div class="main-hover-inner-section container">
      <div class="hover-section-row">
        <div class="flip-box">
          <div class="flip-box-inner">
            <div class="flip-box-front">
              <h2>Front Side</h2>
            </div>
            <div class="flip-box-back">
              <h2>Back Side</h2>
            </div>
           </div>
        </div>
        <div class="flip-box">
          <div class="flip-box-inner">
            <div class="flip-box-front">
              <h2>Front Side</h2>
            </div>
            <div class="flip-box-back">
              <h2>Back Side</h2>
            </div>
           </div>
        </div>
        <div class="flip-box">
          <div class="flip-box-inner">
            <div class="flip-box-front">
              <h2>Front Side</h2>
            </div>
            <div class="flip-box-back">
              <h2>Back Side</h2>
            </div>
           </div>
        </div>
        <div class="flip-box">
          <div class="flip-box-inner">
            <div class="flip-box-front">
              <h2>Front Side</h2>
            </div>
            <div class="flip-box-back">
              <h2>Back Side</h2>
            </div>
           </div>
        </div>
      </div>
    </div>
  </div>
</body>

Step-2: Add CSS Code in the <style>…</style> on the index.html file.

*{
  box-sizing: border-box;
}
body{
  margin: 0;
}
.container:after{
  content:"";
  display:block;
  clear:both;
}
body .container{
  width:100%;
  max-width:1200px;
  padding-left:15px;
  padding-right:15px;
  margin:0 auto;
  position:relative;
  float:none;
}
body .container .container{
  width:100%;
  max-width:100%;
  padding-left:0;
  padding-right:0;
}
.hover-section-row{
  display: flex;
  flex-wrap: wrap;
  margin: 0px -15px;
}
.flip-box{
  width: 25%;
  padding: 0px 15px;
}
.main-hover-section {
    background-color: #fff3f3;
    padding: 50px 15px;
}
.flip-box-inner{
    background-color: #fff3f3;
    padding: 50px 15px;
}
.flip-box-back {
   background-color: #898989;
   color: #fff;
   transform: rotateY(180deg);
}
.flip-box-front {
    background-color: #fff;
    color: #442929;
}
.flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    top: 0;
    left: 0;
  display: flex;
    align-items: center;
    justify-content: center;
}
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

In this animation,

I took the main one div is “flip-box-inner”. and this div in the took the new two div. first is “flip-box-front” and second “flip-box-back”.

then I gave the first and second boxes set in position absolute.

and I rotateY(180deg) the “flip-box-inner” div on the box hover.