Currently, I am using jQuery to create an animation effect on a hidden element (which is an image description) so that it becomes visible when hovering over an image.
Although the code snippet I found does work, it has a downside - all the hidden image descriptions on the page become visible simultaneously. My goal is for only the relevant one to be visible.
I have been attempting to implement $(this) and next() in my code without fully grasping how they function.
var item = $('p.image-description');
$('.popup-image').hover(
function () {
item.addClass('is-visible');
setTimeout(function () {
item.addClass('is-open');
}, 20);
},
function () {
item.removeClass('is-open');
item.one('transitionend', function (e) {
item.removeClass('is-visible');
});
}
);.masonry-entry .popup-image p.image-description {
display: none;
opacity: 0;
transition: all 0.3s linear;
}
.masonry-entry .popup-image p.image-description.is-visible {
display: block;
}
.masonry-entry .popup-image p.image-description.is-open {
margin-left: 0px;
opacity: 1;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="masonry-entry">
<a class="popup-image" href="http://lorempixel.com/400/200/">
<img src="http://lorempixel.com/400/200/" />
<p class="image-description">Text here</p>
</a>
</div>
<div class="masonry-entry">
<a class="popup-image" href="http://lorempixel.com/400/200/">
<img src="http://lorempixel.com/400/200/" />
<p class="image-description">Text here</p>
</a>
</div>
<div class="masonry-entry">
<a class="popup-image" href="http://lorempixel.com/400/200/">
<img src="http://lorempixel.com/400/200/" />
<p class="image-description">Text here</p>
</a>
</div>My aim is to hover over ".popup-image" and only have the corresponding "p.image-description" appear, rather than all the "p.image-description"s on the page at once.