When I hover over the content div, the effect works fine. But when I move my mouse outside of the .parent div, the image does not fade out. There is also an issue when the transition takes place, that you see a flash of a broken image icon. Is there an easy way to fix these issues?
This code can be saved to an html file and run exactly as is.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.parent {
width: 100%;
height: 100%;
background-color: black;
position: relative;
}
.child {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.content {
height: 20vh;
position: relative;
z-index: 1;
border-bottom: 1px solid gray;
}
.content h3 {
position: relative;
margin: 10px;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div class="parent">
<img class="child" src="">
<div class="content" data-imgurl="https://loremflickr.com/320/240?lock=30976">
<h3>Title</h3>
</div>
<img class="child" src="">
<div class="content" data-imgurl="https://loremflickr.com/320/240/paris,girl/all?lock=30976">
<h3>Title</h3>
</div>
<img class="child" src="">
<div class="content" data-imgurl="https://loremflickr.com/320/240/dog?lock=30976">
<h3>Title</h3>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
$('.content').hover(
function() {
var dataImg = $(this).data('imgurl');
$(".child").finish().attr("src", dataImg).animate({
opacity: 1
}, 400);
},
function() {
$(".child").finish().animate({
opacity: 0
}, 400).attr("src", '');
}
);
</script>
</body>
</html>When I hover over the content div, the effect works fine. But when I move my mouse outside of the .parent div, the image does not fade out. There is also an issue when the transition takes place, that you see a flash of a broken image icon. Is there an easy way to fix these issues?
This code can be saved to an html file and run exactly as is.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.parent {
width: 100%;
height: 100%;
background-color: black;
position: relative;
}
.child {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.content {
height: 20vh;
position: relative;
z-index: 1;
border-bottom: 1px solid gray;
}
.content h3 {
position: relative;
margin: 10px;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div class="parent">
<img class="child" src="">
<div class="content" data-imgurl="https://loremflickr.com/320/240?lock=30976">
<h3>Title</h3>
</div>
<img class="child" src="">
<div class="content" data-imgurl="https://loremflickr.com/320/240/paris,girl/all?lock=30976">
<h3>Title</h3>
</div>
<img class="child" src="">
<div class="content" data-imgurl="https://loremflickr.com/320/240/dog?lock=30976">
<h3>Title</h3>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
$('.content').hover(
function() {
var dataImg = $(this).data('imgurl');
$(".child").finish().attr("src", dataImg).animate({
opacity: 1
}, 400);
},
function() {
$(".child").finish().animate({
opacity: 0
}, 400).attr("src", '');
}
);
</script>
</body>
</html>
>Solution :
Instead of referencing .child, I used $(this).prev() to reference the previous element of the content element that was triggering the animation on hover.
Also I removed the .attr("src", '') so it won’t have a broken image.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.parent {
width: 100%;
height: 100%;
background-color: black;
position: relative;
}
.child {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.content {
height: 20vh;
position: relative;
z-index: 1;
border-bottom: 1px solid gray;
}
.content h3 {
position: relative;
margin: 10px;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div class="parent">
<img class="child" src="">
<div class="content" data-imgurl="https://loremflickr.com/320/240?lock=30976">
<h3>Title</h3>
</div>
<img class="child" src="">
<div class="content" data-imgurl="https://loremflickr.com/320/240/paris,girl/all?lock=30976">
<h3>Title</h3>
</div>
<img class="child" src="">
<div class="content" data-imgurl="https://loremflickr.com/320/240/dog?lock=30976">
<h3>Title</h3>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
$('.content').hover(
function() {
var dataImg = $(this).data('imgurl');
$(this).prev().finish().attr("src", dataImg).animate({
opacity: 1
}, 400);
},
function() {
$(this).prev().finish().animate({
opacity: 0
}, 400);
}
);
</script>
</body>
</html>