Щелкните, чтобы перевернуть div, используя javascript

Question

Я бы хотел, чтобы div переворачивался и отображался «назад», если пользователь наводит на него курсор. Задняя сторона будет иметь размер передней части блока div, но содержать другой текст.

Это то, что я пробовал

$('.hover').hover(function() {
  $(this).addClass('flip');
}, function() {
  $(this).removeClass('flip');
});
$('.click').toggle(function() {
  $(this).addClass('flipswing');
}, function() {
  $(this).removeClass('flipswing');
});

.panel {
  width: 300px;
  position: relative;
  background-color: #ccc;
  height: 300px;
  padding: 20px;
}

.panel .front {
  width: 300px;
  height: 200px;
  margin: 10px;
  position: absolute;
  top: 0px;
  left: 0px;
  border: 1px solid #ccc;
  background: #6b7077;
  text-align: center;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
  -webkit-transform: rotateX(0) rotateY(0);
  transform: rotateX(0) rotateY(0);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

.panel .back {
  width: 300px;
  height: 200px;
  margin: 10px;
  position: absolute;
  top: 0px;
  left: 0px;
  border: 1px solid #ccc;
  background: #6b7077;
  text-align: center;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
  -webkit-transform: rotateY(-179deg);
  transform: rotateY(-179deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

.panel.flip .front {
  transform: rotateY(179deg)
}

.panel.flip .back {
  -webkit-transform: rotateX(0) rotateY(0);
}

.panel {
  -webkit-perspective: 800px;
  perspective: 800px;
}

.swing .front,
.swing .back {
  width: 140px;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transform-origin: 170px 0;
  transform-origin: 170px 0;
}

.swing .front {
  -webkit-transform: rotateY(0);
  transform: rotateY(0);
}

.swing .back {
  background-color: #555;
  /* hiding this side, so get darker */
  -webkit-transform: rotateY(-180deg) translateX(198px) translateZ(2px);
  transform: rotateY(-180deg) translateX(198px) translateZ(2px);
}

.swing.flipswing .front {
  background-color: #222;
  /* hiding this side, so get darker */
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.swing.flipswing .back {
  background-color: #80888f;
  -webkit-transform: rotateY(0) translateX(198px) translateZ(2px);
  transform: rotateY(0) translateX(198px) translateZ(2px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-3 col-sm-6">
  <div class="hover panel">
    <div class="front">
      <div class="single_instructor">
        <div class="author">
          <img src="{% static 'second/images/people/person.jpg' %}" style="max-width:100%;max-height:100%;" alt="">
        </div>
        <div class="author_decs">
          <h4>User Name</h4><br>
          <p class="profession">Job Title</p>
          <p>Country</p>
          <div class="social_icons">
            <a href="#"><i class="fa fa-facebook"></i></a>
            <a href="#"><i class="fa fa-twitter"></i></a>
            <a href="#"><i class="fa fa-linkedin"></i></a>
          </div>
        </div>
      </div>
    </div>
    <div class="back">
      This the back
    </div>
  </div>
</div>

В том виде, в каком он сейчас стоит, когда я наводю курсор на div, div не вращается и показывает мне заднюю карту