Cacher is the code snippet organizer for pro developers

<div class="container">
  <div class="row">
    <!-- card flip -->
    <div class="col-xs-3 whatever">
      <div class="image-flip" ontouchstart="this.classList.toggle('hover');">
        <div class="mainflip">
          <div class="frontside">
            <div class="card">
              <div class="card-body text-center">
              <h3 class="card-title">integrity</h3>  <p><img class="img-fluid" alt="{BusinessName} Images" src="xxxx"></p>
                
              </div>
            </div>
          </div>
          <div class="backside">
            <div class="card">
              <div class="card-body text-center mt-4">
                <p class="card-text">when it comes to older roofs, replacement may be your only option. Our technicians have the training necessary to capably replace your roof</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- card flip end-->
        <!-- card flip -->
    <div class="col-xs-3 whatever">
      <div class="image-flip" ontouchstart="this.classList.toggle('hover');">
        <div class="mainflip">
          <div class="frontside">
            <div class="card">
              <div class="card-body text-center">
              <h3 class="card-title">reliable</h3>  <p><img class="img-fluid" alt="{BusinessName} Images" src="xxxx"></p>
                
              </div>
            </div>
          </div>
          <div class="backside">
            <div class="card">
              <div class="card-body text-center mt-4">
                <p class="card-text">when it comes to older roofs, replacement may be your only option. Our technicians have the training necessary to capably replace your roof</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- card flip end-->
        <!-- card flip -->
    <div class="col-xs-3 whatever">
      <div class="image-flip" ontouchstart="this.classList.toggle('hover');">
        <div class="mainflip">
          <div class="frontside">
            <div class="card">
              <div class="card-body text-center">
              <h3 class="card-title">quality</h3>  <p><img class="img-fluid" alt="{BusinessName} Images" src="xxxx"></p>
                
              </div>
            </div>
          </div>
          <div class="backside">
            <div class="card">
              <div class="card-body text-center mt-4">
                <p class="card-text">when it comes to older roofs, replacement may be your only option. Our technicians have the training necessary to capably replace your roof</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- card flip end-->
  </div>
</div>

body {
  background-color: #333;
}
.card-text{
  padding: 25px 0;
}
.whatever {
  height: 250px;
  width: 300px;
  border-radius: 5px;
  margin: 45px;
}

/* card flip */
.image-flip:hover .backside,
.image-flip.hover .backside {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.image-flip:hover .frontside,
.image-flip.hover .frontside {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.mainflip {
  -webkit-transition: 1s;
  -webkit-transform-style: preserve-3d;
  -ms-transition: 1s;
  -moz-transition: 1s;
  -moz-transform: perspective(1000px);
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transition: 1s;
  transform-style: preserve-3d;
  position: relative;
}

.frontside {
  position: relative;
  -webkit-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  z-index: 2;
  margin-bottom: 30px;
}

.backside {
  position: absolute;
  top: 0;
  left: 0;
  background: white;
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
  -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
  box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
}

.frontside,
.backside {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transition: 1s;
  -moz-transform-style: preserve-3d;
  -o-transition: 1s;
  -o-transform-style: preserve-3d;
  -ms-transition: 1s;
  -ms-transform-style: preserve-3d;
  transition: 1s;
  transform-style: preserve-3d;
}

.frontside .card,
.backside .card {
  height: 300px;
}
.frontside .card .card-body img {
  ;
}
.frontside {
  background-color: #fff;
}
/* card flip end */