phantom phantom - 5 months ago 13
Javascript Question

make div bigger and animate bigger section upwards on hover

I am trying to animate a div upwards when a user hovers on the div.

I am able to animate the div making it bigger, however the animation happens downwards. I am trying to keep the bottom of the div remain in the same place, and have a smooth animating increasing the size of the div upwards.

See jsfiddle here which demonstrates what my code is currently doing.

Please see code below:



.box {
height: 170px;
padding-bottom: 15px;
width: 50%;
}

.content {
background-color: #e3e4e6;
height: 100%;
text-align: center;
}

.content:hover {
height: 110%;
}

<div class="box">
<div class="content">TEST</div>
</div>




Answer

you can do this using transform:scaleY() and set the transform-origin to bottom .
i also put a margin-top:100px to see better the effect
also you can use transition to make the scale smoother

you also need to scale back the text.


see here jsfiddle

you need to scale the text back to it's original state in the same time that you scale the div. so if you scale the div 2 times. you need to scale back the text with 1/2 , same if you scale 3 times...scale back with 1/3

in this case you enlarge .content by 1.5 so you need to scale down the text inside by 1/1.5 = 0.66

code :

.box {
  height: 170px;
  padding-bottom: 15px;
  width: 50%;
}

.content {
  background-color: #e3e4e6;
  height: 100%;
  text-align: center;
  margin-top:300px;

}
.content:hover p { 
  transform:scaleY(0.66)
 }
.content:hover {
  transform:scaleY(1.5);
  transform-origin: bottom;
}