Can I invert the height direction from top-down to bottom-up?

Question

I want to change the height growth path from top-down to bottom-up. Is it possible in CSS?

.button {
    margin-top:200px;
    margin-right:34px;
    width:150px;
    height:45px;
    background:black;
    float:right;
    transition-duration:2s;  
}
.buttom:hover{
    height:180px;
    transition-duration:2s;
}

<div class='button'> </div>

http://jsfiddle.net/yasharshahmiri/1pkemq1p/3/

Hitchhike

only way i can think of doing this is to use absolute positioning, with original position based on bottom instead of top. using relative positioning with floats as you've done ... i dont think so. – Attenuator

Answer 1

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>

Radiogram

Answer 2

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/

Mediatory

this is outside the box, and can still use relative positioning. great idea. – Attenuator

Answer 3

@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>

Sharpnosed

Answer 4

You have to set absolute position to the <div>.

.buttom {
  width: 150px;
  height: 45px;
  background: black;
  transition-duration: 2s;
  position: absolute;
  right: 10%;
  bottom: 10%;
}
.buttom:hover {
  height: 180px;
  transition-duration: 2s;
}

<div class='buttom'></div>

Sorel