подскажите пожалуйста как правильно реализовать 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>
Заранее большое спасибо.
$(this)
. вот и в этот раз нужно применить уже полученные знания, но только на другой аналогичной задаче