i have a simple slide show image div. I'm trying to show the bottom of the image because always is showing the top.
HTML Code:
<div class="mainImg">
<div>
<img src="image1.jpg" />
</div>
<div>
<img src="image2.jpg" />
</div>
<div>
<img src="image3.jpg" />
</div>
</div>
$(function(){
$(".mainImg > div:gt(0)").hide();
setInterval(function(){
$('.mainImg > div:first')
.fadeOut(2000)
.next()
.fadeIn(2000)
.end()
.appendTo('.mainImg');
}, 8000);
});
.mainImg {
position: relative;
width: 100%;
max-height: 500px;
}
.mainImg > div {
position: absolute;
width: 100%;
max-height: 500px;
overflow: hidden;
}
.mainImg > div > img {
width: 100%;
}
The simplest change is to make the image absolutely positioned and dock it to the bottom of the container.
You will see the difference in your fiddle sample moe clearly if you lower the height to 300px.
.mainImg > div > img {
width: 100%;
position: absolute;
bottom: 0;
}