JSFiddle - React, Tailwind, and code Playground

by HcJanni

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip-container">
  <div class="flipper">
    <div class="front artist-1">
      <!-- front content -->
      <button>Flip</button>

    </div>
    <div class="back">
    <button class="fbutton">Flip</button>
      <p>You won</p>
    </div>
  </div>
</div>

<div class="flip-container">
  <div class="flipper">
    <div class="front artist-1">
      <!-- front content -->
      <button>Flip</button>
    </div>
    <div class="back">
    <button class="fbutton">Flip</button>
      <p>You won</p>
    </div>

  </div>

</div>

CSS

/* flip the pane when hovered */

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

.flip-container,
.front,
.back {
  width: 250px;
  height: 250px;
}


/* flip speed */

.flipper {
  transition: 0.8s;
  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;
  transform: rotateY(0deg);
}


/* back, initially hidden pane */

.back {
  transform: rotateY(180deg);
  background-color: #fff;
}

.artist-1 {
  background: url(http://img.bleacherreport.net/img/images/photos/003/556/940/edab30087cea36c0ca206fc61a4b10fa_crop_north.jpg?w=630&h=420&q=75) center center no-repeat;
  background-size: cover;
}

JavaScript

$('.flip-container .flipper button').click(function() {
  // flip back previous hovered element
  $('.flip-container.hover').toggleClass('hover');
  // flip current element
  $(this).closest('.flip-container').toggleClass('hover');
});

$('.fbutton').click(function() {
  // flip current element
  $(this).closest('.flip-container').removeClass('hover');
});