CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Istiaque Ahmed
Istiaque Ahmed

Reputation: 6498

implementing a div showing up partially at the bottom inside another div to show up fully on mouse hover

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 ?

Upvotes: 0

Views: 500

Answers (3)

Abhishek
Abhishek

Reputation: 836

May be this will help you out.

SCRIPT

 $(function(){
    $(".maindiv").hover(function(){
        $(this).children('.lowerdiv').stop().animate({top:0})
    },function() {
            $(this).children('.lowerdiv').stop()..animate({top:150})
        })
 })​

HTML

<div class="maindiv">
    Main div content
    <div class="lowerdiv">
        lowediv content
    </div>
</div>
<div class="maindiv">
    Main div content
    <div class="lowerdiv">
        lowediv content
    </div>
</div>

CSS

    .maindiv{
    height:200px;
    width:200px;
    background:#CCC;
    position:relative;
    overflow:hidden;
    float:left;
    margin:10px;
}
.lowerdiv{
    height:200px;
    width:200px;
    background:#797987;
    position:absolute;
    top:150px;
}​

jsfiddle - http://jsfiddle.net/tRYTq/4/

Upvotes: 1

m7o
m7o

Reputation: 921

you need a negative position (as they did it on the tui page), start with something like

position:absolute;
bottom:-20px;

and try around until it fits.

using jquery you then can do something like:

$('.maindiv').hover(
  function () {
    $(this).find('.lower_div').stop(true, false).animate({'bottom':0});
  },
  function () {
    $(this).find('.lower_div').stop(true, false).animate({'bottom':-20});
  }
);

http://api.jquery.com/hover/

Of course this way you always have to change the original position (-20) in your css AND the js while you try around to find the best starting position. You could do this more elegantly by storing the original_position before the animation starts, but that is maybe going to far here? I am rather new to stackoverflow

Upvotes: 0

Evan Kennedy
Evan Kennedy

Reputation: 4185

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.

Upvotes: 1

Related Questions