Navigating image captions: I'm looking to hide the title caption on hover and display overlay text instead. However, when hovering over the image, both the title and overlay text disappear. Where am I going wrong with this?
If anyone could provide insight into what might be causing this issue, I would greatly appreciate it.
$(document).ready(function() {
$('.overlay').hide();
$('.section-solution').hover(
function() {
$('.hide-on-hover').hide();
$('.text').show();
},
function() {
$('.hide-on-hover').show();
$('.text').hide();
}
);
});.container-img {
position: relative;
padding: 20px;
}
.wp-caption {
position: relative;
padding: 0;
margin: 0;
}
.fullwidth-img img {
margin-bottom: 70px;
width: 100%;
height: 400px;
object-fit: cover;
}
.wp-caption img {
display: block;
max-width: 100%;
height: auto;
}
.wp-caption-text {
display: block;
position: absolute;
width: 100%;
color: #fff;
left: 0;
bottom: 0;
padding: 4em;
font-weight: 700;
z-index: 2;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wp-caption-text p {
color: white;
font-size: 26px;
font-weight: 500;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: black;
color: white;
font-size: 20px;
padding: 2em;
}
.container-img:hover .overlay {
opacity: 1;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="section-solution ">
<div class="container">
<div class="row">
<div class="container-img fullwidth-img" id="last">
<figure class="wp-caption">
<div class="demo">
<img width="300" height="200" src="https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS...>
</div>
<div class="overlay">
<div class="text">
<figcaption class="wp-caption-text on-hover">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</figcaption>
</div>
</div>
<figcaption class="wp-caption-text">
<p class="hide-on-hover">
Lorem ipsum
</p>
</figcaption>
</figure>
</div>
</div>
</div>
</section>Explore the fiddle here: https://jsfiddle.net/98j07g4k/1/