I am seeking assistance with implementing a simple transition effect on hover/out for a div box to switch between the first image .image-main and the second one image-hover. The current setup works properly, but I am unsure how to incorporate a mouseOn/mouseOut effect (a basic opacity fade out will suffice).
I prefer using JS for this task as I intend to include additional actions. The CSS hover effect interfered with the activity of .img-fluid.
HTML:
<div class="col-6">
<div class="product-box">
<div class="product-box__image">
<img class="img-fluid image-main" src="https://dummyimage.com/400x200/000/fff">
<img class="img-fluid image-hover" src="https://dummyimage.com/400x200/00cc00/fff">
</div>
<div class="product-box__content">
<p class="text-center p-3">
hello description<br>on hover - change image too
</p>
</div>
</div>
</div>
JS:
$('.product-box').hover(
function() {
var main = $(this).find('.image-main');
var second = $(this).find('.image-hover');
main.removeClass('image-main');
main.addClass('image-hover');
second.addClass('image-main');
second.removeClass('image-hover');
},
function() {
var second = $(this).find('.image-main');
var main = $(this).find('.image-hover');
second.removeClass('image-main');
second.addClass('image-hover');
main.addClass('image-main');
main.removeClass('image-hover');
}
);
CSS:
.product-box {
border: 1px solid gray;
}
.image-hover {
display: none;
}