CSS Transition and Auto Position

Question

I have a div .boxthat has an absolute position set at the bottom of the parent div. It does not have a top position because the height is different for different divs .box. When hovering over the parent div, I want to change its position topto 0 with the transition effect.

In the following code, the transition does not work unless I define the top position by default. I tried to use top: autoand it still does not work. How to use the transition without determining the top position.

Here is 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/

Answer 1

, top: http://jsfiddle.net/5hs09apn/2/

height , 100%; , 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>

Hide result

Answer 2

Top JQuery, .box position().
Top .box height.

JQuery, Top , CSS , .

​​ JQuery:

$(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");
    });
});

, , .

Answer 3

:

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

, , . , , .