Question

172

make div bigger and animate bigger section upwards on hover

rated 0 times [ 174] [ 2] / answers: 1 / hits: 17386 / 8 Years ago, tue, june 28, 2016, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kareem

Add To Favorites

Follow

Total Points: 733

Total Questions: 110

Total Answers: 102

Location: Bermuda

Member since Thu, Apr 20, 2023

1 Year ago

answered 8 Years ago jocelynkarsynr · Accepted Answer

You can do this using transform:scaleY() and set the transform-origin to bottom. I also put a margin-top:100px to see the effect better. 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;

  transition:0.3s;

}



.content:hover p {

  transform: scaleY(0.66)

}



.content:hover {

  transform: scaleY(1.5);

  transform-origin: bottom;

}

<div class=box>

  <div class=content>

    <p>

      TEST

    </p>

  </div>

</div>