Recently, I came across a useful jQuery tutorial called "jQuery for Absolute Beginners: Day 8". In this tutorial, there is an interesting code snippet that caught my attention:
$(function() {
$('.wrap').hover(function() {
$(this).children('.front').stop().animate({
"top": '300px'
}, 900);
}, function() {
$(this).children('.front').stop().animate({
"top": '0'
}, 700);
});
});#container {
width: 850px;
text-align: center;
margin: auto;
}
.wrap {
width: 250px;
height: 140px;
position: relative;
overflow: hidden;
padding: 0 1em;
}
img {
position: absolute;
top: 0;
left: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="wrap">
<img src="back.jpg" alt="image" />
<img src="front.jpg" class="front" alt="image" />
</div>
</div>I was intrigued by the positioning of images in this code. The front.jpg seems to appear on top of back.jpg. Could it be because front.jpg is placed after back.jpg within the HTML structure?