CODEWITHSUNDEEP
htmlcss
user1355300
user1355300

Reputation: 4987

CSS Transition and Auto position

I have a div .box with which has absolute position set at the bottom of the parent div. It does not have the top position set because the height differs for different .box divs. On hover over the parent div, I want to change its top position to 0 with the transition effect.

In the following code transition does not work if I do not define the top position by default. I have tried using top: auto and it still does not work. How can I use transition without defining the top position.

Here's my code:

HTML:

<div class="wrap">
    <div class="box">
        Box
    </div>
</div>

CSS:

.wrap{
    position: relative;
    height: 200px;
    width: 200px;
    background: green;
}

.box{
    background: yellow;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all  0.9s ease 0s;
    top: 50%; /*== does not work without it ==*/
}

.wrap:hover .box{
    top: 0;
    bottom: 0;
}

Fiddle: http://jsfiddle.net/5hs09apn/

Upvotes: 4

Views: 1922

Answers (3)

Venkata Krishna
Venkata Krishna

Reputation: 1776

Add Top property in JQuery getting the current value of the Top of the .box using position().
This will be dynamic allocation of Top and will not effect your condition of varying .box height.

While doing this, you will have to add the hover effect in the JQuery part too, since the Top will be defined here and CSS wont know what to do with the hover.

Check the Fiddle here

This is the JQuery function added:

$(document).ready(function(){
    var x = $('.box').position();
    var myTop = x.top;
    $('.box').css("top",myTop+"px");
    $('.box').css("transition","all  0.9s ease 0s");
    $('.wrap').bind('mouseover',function(){
        $('.box').css("top","0px");
        $('.box').css("bottom","0px");
    });
    $('.wrap').bind('mouseout',function(){
        $('.box').css("top",myTop+"px");
        $('.box').css("bottom","0px");
    });
});

Hope this gives you what you need.

Upvotes: 1

Naeem Shaikh
Naeem Shaikh

Reputation: 15715

A slight different approach than using top: http://jsfiddle.net/5hs09apn/2/

set the height for the box, and on hover set it to 100%; let the bottom be zero, so you don't even need to use top

.box{
    background: yellow;
    position: absolute;
    bottom: 0;
    left: 0;
   height:20px;
    transition: all  1s ease 0s;
}

.wrap:hover .box{
   height:100%;
    bottom: 0;
}


.wrap {
  position: relative;
  height: 200px;
  width: 200px;
  background: green;
}
.box {
  background: yellow;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 20px;
  transition: all 1s ease 0s;
}
.wrap:hover .box {
  height: 100%;
  bottom: 0;
}
<div class="wrap">
  <div class="box">
    Box
  </div>
</div>

Upvotes: 2

V&#237;tor Martins
V&#237;tor Martins

Reputation: 1440

You can use:

.wrap:hover .box{
    margin-bottom: 100%;
}

And try with different percentages until you get one you like. It's crude but I think it can work.

Upvotes: 0

Related Questions