<div class="cardContainer inactive">
  <div class="card">
    <div class="side front">
      <div class="img img1"></div>
      <div class="info">
        <h2>Super S</h2>
        <p>A stand-on with an exceptional compact stance. Great for tight spaces and trailering.</p>
      </div>
    </div>
    <div class="side back">
      <div class="info">
        <h2>At a glance</h2>
        <div class="reviews">
          <svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
          <svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
          <svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
          <svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
          <svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <defs><path d="M0 0h24v24H0V0z" id="a"/></defs><clipPath id="b"><use overflow="visible" xlink:href="#a"/></clipPath><path clip-path="url(#b)" d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4V6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/>
          </svg>
          <p>23 Reviews</p>
        </div>
        <ul>
          <li>Manage backyard gates with ease with the 36" deck option</li>
          <li>Your choice of deck sizes ranging from 36", 48", 52" and 60"</li>
          <li>Updated hip bolstering offers superior operator comfort and positioning</li>
        </ul>
        <div class="btn">
          <h4>Learn More</h4>
          <svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="cardContainer inactive">
  <div class="card">
    <div class="side front">
      <div class="img img2"></div>
      <div class="info">
        <h2>Super Z HyperDrive</h2>
        <p>A high-performance zero-turn with unsurpassed strength, speed &amp; reliability with a warranty to match.</p>
      </div>
    </div>
    <div class="side back">
      <div class="info">
        <h2>At a glance</h2>
        <div class="reviews">
          <svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
          <svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
          <svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
          <svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
          <svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
          <p>39 Reviews</p>
        </div>
        <ul>
          <li>Your choice of VX4 decks ranging from 60 to 72 inches</li>
          <li>The 37hp Vanguard BigBlock EFI makes short work out of big jobs enabling speeds up to 16mph</li>
          <li>Massive 24" drive tires and 13" front caster tires</li>
        </ul>
        <div class="btn">
          <h4>Learn More</h4>
          <svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>
        </div>
      </div>
    </div>
  </div>
</div>

*, *:after, *:before {
  box-sizing: border-box;
}

h2, h4, p, ul, li {
  margin: 0;
  padding: 0;
}

h2, h4 {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  color: #333333;
}

h2 {
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -0.2px;
  margin-bottom: 10px;
}

p, li {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  color: #555;
  line-height: 22px;
}

ul, li {
  text-decoration: none;
  list-style: disc outside;
}

ul {
  padding-left: 20px;
}

svg {
  margin: 0px;
  min-width: 24px;
  min-height: 24px;
}

body {
  background-color: #dadce2;
  background-image: linear-gradient(140deg, white, #dadce2);
  margin: 0;
  width: 100vw;
  min-height: 450px;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cardContainer {
  position: relative;
  width: 540px;
  height: 480px;
  min-width: 300px;
  min-height: 400px;
  margin: 4px;
  
  -webkit-perspective: 1000px;
          perspective: 1000px;
}

.active {
  -webkit-transform: translateZ(0px) rotateY(180deg) !important;
          transform: translateZ(0px) rotateY(180deg) !important;
}
.active:after {
  display: none;
}

.card {
  display: inline-block;
  border:4px solid #ddd;
  width: 100%;
  height: 100%;
  cursor: pointer;
  -moz-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translateZ(-100px);
          transform: translateZ(-100px);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.card:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  box-shadow: 0 14px 50px -4px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1.4);
}
.card:hover {
  -webkit-transform: translateZ(0px);
          transform: translateZ(0px);
}
.card:hover:after {
  opacity: 1;
}
.card .side {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background-color: white;
}
.card .front {
  z-index: 2;
}
.card .back {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.card .info {
  padding: 16px;
}

.front .img {
  background-color: #dadce2;
  background-position: center;
  background-size: cover;
  border-radius: 5px 5px 0 0;
  width: 100%;
  height: 350px;
}
.front .img1 {
  background-image: url(http://i.imgur.com/1aE1nMA.jpg);
}
.front .img2 {
  background-image: url(http://i.imgur.com/2p9VXAn.jpg);
}
.front .img3 {
  background-image: url(http://i.imgur.com/I5ABT2v.jpg);
}