JSFiddle - React, Tailwind, and code Playground

HTML

<div id=page15>
    <div class="social">
        <div class="card-container">
            <a 
            class="card" 
            target="_blank" 
            href="http://example.org" />
                <img  src="http://www.placekitten.com/44/44" class="back">
                <img 
            src="http://www.placecage.com/44/44"    
                  class="front" />
            </a>
        </div>
    </div>    
    <div style="background: url(http://www.placekitten.com/200/200)" class="background"></div>
</div>

SCSS

#page15 {
  width: 100%;
  z-index: 115;
  height: 100%;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0); 
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
}

.background{
    width: 200px;
    position: absolute;
    height: 200px;
}

.card-container {
  position: relative;
  height: 100%;
  .card {
    width: 100%;
    display: inline-block;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    .front, .back {
      position: absolute;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      transition: 0.6s;
      -webkit-transform-origin: 50% 0;
      transform-origin: 50% 0;
    }
    .front {
      -webkit-transform: translate3d(0, 0, -70px) rotateX(90deg);
      transform: translate3d(0, 0, -70px) rotateX(90deg);
    }
    .back {
      -webkit-transform: translate3d(0, 0, 0) rotateX(0deg);
      transform: translate3d(0, 0, 0) rotateX(0deg);
    }
    &:hover {
      .front {
        -webkit-transform: translate3d(0, 0, 0) rotateX(0deg);
        transform: translate3d(0, 0, 0) rotateX(0deg);
      }
      .back {
        -webkit-transform: translate3d(0, 70px, 0) rotateX(-90deg);
        transform: translate3d(0, 70px, 0) rotateX(-90deg);
      }
    }
  }
}