Invert height direction in CSS

Question

I want to change the path of height growth from top to bottom. Is this possible in CSS? this is my code
http://jsfiddle.net/yasharshahmiri/1pkemq1p/3/

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

Answer 1

All you need to do is set position: absolute and bottom position as follows:

 .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 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 so:

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

Answer 2

You can do a smart trick: change the margin-top at the same time as the height so that it looks like the height increases from bottom to top:

 .buttom:hover { height: 180px; margin-top: 65px; transition-duration: 2s; } 

Final margin-top (65px) - the difference between the initial margin-top (200) and the difference between the resulting (180px) and initial (45px) heights: 65 = 200 - (180-45). In this case, the block will visually remain motionless during growth.

Demo: http://jsfiddle.net/1pkemq1p/6/

Answer 3

You must set the absolute position to <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> 

Answer 4

@PlantTheIdea (nice name) replied. This caveat (absolute positioning) is pretty big, 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>