Как сделать при наведение на блок появляется такой же блок с текстом?

Question

подскажите пожалуйста как правильно реализовать hover на jQuery при наведении на блок появляется такой же блок с текстом. Есть две стороны front (лицевая) и скрытая (display:none) back сторона, по на ведению на front сторону появляется плавно сторона back, убираешь с блок cursor плавно возвращается сторона front. Таких блоков может быть 4 или 6. Пытался несколькими вариантами, но все не то:

1) $('.front').mouseover(function () {
  $('.front').hide();
  $('.back').show();
});

$('.back').mouseout(function(){
  $('.front').show();
  $('.back').hide();
});

2)$('.front').mouseover(function () {
  $('.back').fadeToggle();
});

3)$(document).on('hover', 'front', function(){
  $(this).children('.front').hide();
  $(this).children('.back').show();
}

.effect {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 233px;
    z-index: 0;
}

.front,
.back {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 60px 35px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    cursor: pointer;
}

div.business-content.front.nomination {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 45px 45px;
    background: #2B2C31;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
    border-radius: 15px;
}

<div class="col-lg-6 mt_30">
<div class="box">
<div class="wrapper effect">
<div class="content front nomination">
<img class="images" src="#" alt="Agencies">
<h5 class="subheading">Agencies</h5>
</div>
<div class="back backside">
<a class="subheading subheading-modifier" href="#">Agencies</a>
<p class="text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 500s, when an unknown printer took</p>
</div>
</div>
</div>
</div>

Заранее большое спасибо.

Answer 1

$('.front').mouseover(function () {
  $('.back').show(2000);
});
$('.front').mouseout(function () {
  $('.back').hide();
});

Answer 2

.card {
  position: relative;
  width: 237px;
  height: 237px;
  transform: translate(0%, 0%);
  text-align: center;
}

.card:hover .card__front {
  transform: rotateY(180deg);
}

.card:hover .card__back {
  z-index:3;
  transform: rotateY(0deg);
}

.card__wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform 0.6s ease-in-out;
}

.card__front {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #19181b;
}

.card__back {
  background-color: #19181b;
  transform: rotateY(180deg);
}

.card__title {
  font-weight: 500;
  font-size: 20px;
  color: #eccff6;
}

<div class="card">
  <div class="card__wrapper card__front">
    <p class="card__title">hello world</p>
  </div>
  <div class="card__wrapper card__back">
    <p class="card__title">Привет мир</p>
  </div>
</div>

Такое спокойно можно реализовать и на чистом css

БЛОГ НА HUSL

Как сделать при наведение на блок появляется такой же блок с текстом?

Ответы (2 шт):