Flip card effect

HTML

<link rel="stylesheet" href="//fast.fonts.net/cssapi/a485cc3e-5a8b-4db0-acb0-f5d024bcd159.css">
<div class="card-container">



  <div class="one flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
      <div class="front">
        <div>
          <!-- front content -->
          <h3>Structural Heart <br />Disease</h3>
          <p>Ovitiam et landi que eicilitibus am, eum, eatius sunt fuga</p>
        </div>
      </div>
      <div class="back">
        <div>
          <!-- back content -->
          <h3>Back</h3>
          <p>hello</p>
        </div>
      </div>
    </div>
  </div>

</div>

CSS

.card-container {
  max-width: 830px;
  margin: 0 auto;
  color: #fff;
  font-size: 12px;
  font-family: arial;
}

.card-container h3 {
  font-size: 16px;
  text-align: center;
}

.front > div,
.back > div {
  padding: 10px;
}


/* entire container, keeps perspective */

.flip-container {
  perspective: 1000;
  display: inline-block;
}


/* flip the pane when hovered */

.flip-container:hover .flipper,
.flip-container.hover .flipper {
  transform: rotateY(180deg);
}

.flip-container,
.front,
.back {
  width: 166px;
  height: 166px;
  float: left;
  display: block;
}


/* flip speed goes here */

.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}


/* hide back of pane during swap */

.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}


/* front pane, placed above back */

.front {
  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(0deg);
}


/* back, initially hidden pane */

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

.one .front {
  background: #fcc23d;
}

.one .back {
  background: #333;
}

.two .front {
  background: #f7a45e;
}

.two .back {
  background: #333;
}

.three .front {
  background: #f47e64;
}

.three .back {
  background: #333;
}

.four .front {
  background: #c4283d;
}

.four .back {
  background: #333;
}

.five .front {
  background: #662c90;
}

.five .back {
  background: #333;
}

.six .front {
  background: #1b98d2;
}

.six .back {
  background: #333;
}

.seven .front {
  background: #0d7ab5;
}

.seven .back {
  background: #333;
}

.eight .front {
  background: #07767f;
}

.eight .back {
  background: #333;
}

.nine .front {
  background: #253646;
}

.nine .back {
  background: #333;
}

.ten .front {
  background: #58595b;
}

.ten .back {
  background: #333;
}