Invert height direction in CSS
All you need is to set position: absolute and bottom position like this:
.buttom{
margin-top:200px;
margin-right:34px;
width:150px;
height:45px;
background:black;
float:right;
position:absolute;
bottom: 10px;
transition: height 2s ease-in-out
}
.buttom:hover{
height:180px
} <div class='buttom'> </div>Use Rotate and transform-origin to be able to set position relative to the element
.buttom{
margin-top:200px; /* this shall be higher than the height on hover*/
margin-right:34px;
width:150px;
height:45px;
background:black;
transition: height 2s ease-in-out ;
transform: rotatex(180deg);
transform-origin: top;
}
.buttom:hover{
height:180px
}
<div class='buttom'> </div>Or this way:
.buttom{
width:150px;
height:45px;
background:black;
transition: height .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) ;
transform: rotatex(180deg) translate3d(0, -200px,0);/* the Y-Value shall be higher than the height on hover*/
transform-origin: top;
}
.buttom:hover{
height:180px
}
<div class='buttom'></div>You can do a smart trick: change margin-top simultaneously with height so that it looks like height is growing from bottom to top:
.buttom:hover {
height: 180px;
margin-top: 65px;
transition-duration: 2s;
}
Final margin-top (65px) is the difference of the starting margin-top (200) and diff of the resulting (180px) and initial (45px) height: 65 = 200 - (180 - 45). In this case block will visually stay fixed while growing up.
Demo: http://jsfiddle.net/1pkemq1p/6/
@PlantTheIdea (nice name) had the answer. It's caveat (absolute positioning) is a pretty big one, depending on your layout, but here's how it works:
.bottom-wrap { position: relative; height: 180px;}
.bottom { position: absolute; bottom:0; width: 100px; height: 20px;
background: #000;
transition: height 0.2s ease-in-out;
}
.bottom:hover { height: 180px; }<div class="bottom-wrap">
<div class="bottom">
</div>
</div>