How to display the bottom of an image?


Tags: jquery,html,css,css3

Problem :

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>

Jquery Code:

$(function(){
    $(".mainImg > div:gt(0)").hide();

    setInterval(function(){
        $('.mainImg > div:first')
        .fadeOut(2000)
        .next()
        .fadeIn(2000)
        .end()
        .appendTo('.mainImg');
    }, 8000);
});

CSS Code:

.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 code is working perfectly but the image is showing only the top part of 500px, and if the image have different height sizes how to do it?

enter image description here



Solution :

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;
  }

    CSS Howto..

    How would I replicate this input text effect where they're almost a merged box in CSS/HTML?

    How to prevent page from jumping on menu open?

    Screen scraping pages that use CSS for layout and formatting…how to scrape the CSS applicable to the html?

    How to perfectly center contents in an unordered list?

    How can i increase the round corner button width dynamically depends on the text size in CSS?

    How to make the jQuery datePicker popup opaque and always in the foreground?

    How to fix angular-strap css

    How to add Button over image using CSS?

    How to compile or convert sass / scss to css with node-sass (no Ruby)?

    How to create a div filling the vertical available space without overlapping the containing div?

    How to use Vendor Properties in Multiple Backgrounds?

    How to implement :parent selector in css

    How to scale canvas and keep its position on screen?

    How quora put that image on their home page? [closed]

    How do I apply desktop media queries style to IE?

    how to pause css animation on hover using jquery

    How to center absolute position element in my case

    How to find last/first not empty child using only CSS?

    how to use two css style in a div or span

    How to Assemble HTML,CSS and JS with EachOther

    How to remove empty space in thumbnail grid

    How to customize the size of JCoverFlip?

    How can I stretch my navigation and content area height to 100% in CSS?

    How to force divs into the same row when using Blueprint CSS

    How to make an image appear over another image when mouse hovers with css3?

    How to stop a CSS rule from applying to a specific element [duplicate]

    How to get the initial value of style properties in javascript? [duplicate]

    How to edit horizantal drop down menu

    How do I add an image to a progress bar in HTML/CSS?

    how to apply the css style only to child