Adding a Flip Card (with Text Behind Each Card)

If you wish to create flip card effects, that will look as follows, follow the steps indicated.

Create a Raw HTML, and copy and paste the following HTML code.

<style type="text/css">
  .card-hotspot {
      width: 210px;/*to edit*/
      height: 325px;/*to edit*/
      display: inline-block;
      perspective: 800px;
      cursor: pointer;
    }

    .card-front, .card-back {
      box-sizing: border-box;
      position: absolute;
      width: 100%;
      height: 100%;
      /* background: white; */
      backface-visibility: hidden;
      transform-style: preserve-3d;
      transition: all 1s ease-in-out;
    }

    .card-back {
      /* background: #FFF; */
      padding: 20px;
      transform: rotateY(-180deg);

    }

    .card-hotspot:hover .card-front {
      transform: rotateY(180deg);
    }

    .card-hotspot:hover .card-back {
      transform: rotateY(0deg);
    }
</style>

<div class="card-hotspot">
  <div class="card">
    <div class="card-front"><img src="/static/myelement.png" /></div><!--change the src-->
    <div class="card-back">My academy: Basic Features</div><!--change text-->
  </div>
</div>

Note: If you already have a flip card component but have to update it, just take the code inbetween <style> and </style> and copy paste it instead of the style you already have.