Question

this is the link

When you take the mouse over the four image boxes under ‘TUI Exclusive Offering’, you get the effect described in the question title.

html :

<div class="maindiv">
<img src="img/img.jpg" />


<div class="lower_div">

this is the lower div1<br>
this is the lower div2<br>
this is the lower div3<br>
this is the lower div4<br>
this is the lower div5<br>
this is the lower div6<br>
</div>
</div>

the way to make the lower_div sit at the bottom is to make its position absolute and bottom 0. But for whatever reason in my big html page , this technique is not working though it does work in another html page containing only this snippet.

So I am looking for another way to make the div sit at the bottom. Besides I also need to make it show up fully on mousehover.

How to achieve those ?

Answer 1

Here is a working demo: http://jsfiddle.net/qbyeC/

The javascript is simple when jQuery is involved. All you have to do is define on mouseenter and mouseleave for each maindiv.

$('.maindiv').on({
    mouseenter : function(e){
        $(this).children('.lowerdiv').stop(true,false);                    
        $(this).children('.lowerdiv').animate({top:0,marginTop:0});
    },
    mouseleave : function(e){
        $(this).children('.lowerdiv').stop(true,false);
        $(this).children('.lowerdiv').animate({top:'100%',marginTop:'-40px'});
    }
});​

This checks for the lowerdiv class and animates it to the right position on each event. NOTE: The marginTop on the second line of mouseleave should match the margin-top css property on the lowerdiv class. This is the amount that you want the div to stick up when the mouse is not over the element.

The css should be modified to your liking, but these are the important parts:

.maindiv {
    overflow:hidden;
    position:relative;
}
.lowerdiv {
    position:absolute;
    width:100%;
    bottom:0px;
    top:100%;
    margin-top:-40px;
}

The html code is how you put it except I changed lower-div to lowerdiv to match maindiv.