css - CSS Flipcard using Bulma tiles

Question

I am hoping some of you might have some ideas regarding using Bulma Tiles (https://bulma.io/documentation/layout/tiles/). I am partially successful with getting the flip functionality to work using the input checkbox, but the content inside the tile is flipping, not the entire tile.

/* ==========================================
reference --> https://codepen.io/amazingrando/pen/yjbAh
========================================== */

.tile input[type="checkbox"] {
  /*Hiding the checkbox. We never want to see it.*/
  position: absolute;
  left: -9999em;
}

.flip-tile {
  cursor: pointer;

  /*Animation elements*/
  display: block;
  perspective: 600px;
  position: relative;
  transition: all 0.1s;
  
  &:hover {
    transform: scale(1.02, 1.02);
  }
}

.flip-tile-front, .flip-tile-back{
  //position: absolute; top: 0; left: 0;
  //width: inherit; height: inherit; /*Size of the card is set by the container*/

  backface-visibility: hidden; /*Makes a card invisible from behind.*/
  transform-style: preserve-3d;
  transition: all 0.4s ease-in-out;
}
.flip-tile-front {
  /*Default rotation values*/
  transform: rotateX(0deg) rotateY(0deg);
}
.flip-tile-back {
  background: MediumPurple; 

  visibility: hidden;
  /*Default rotation value*/
  transform: rotateY(-180deg);
}

/*When the container is clicked the checkbox is marked as checked. This activates the CSS below. */
.tile input[type="checkbox"]:checked {
  ~ .flip-tile {
    //animation: lift 0.4s linear;
    
    .flip-tile-back {
      visibility: visible;
      transform: rotateX(0deg) rotateY(0deg);
    }
    .flip-tile-front {
      transform: rotateY(180deg);
    }
  }
}

https://codepen.io/lostcook/pen/QWyvBey

Any ideas or help would greatly be appreciated.

Thanks

标签： cssbulma