make div bigger and animate bigger section upwards on hover

Question

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>

if you increase the height is gonna increase towards bottom. — Piyush.kapoor, Jun 28 '16 at 10:08

score 8 · Accepted Answer · edited Aug 29 '17 at 18:33

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>

score 2 · Answer 2 · answered Jun 28 '16 at 10:13

Try it like this (I have no other idea...): You can give to the class "box" a bigger height (I put a red border around, so you can see it) than the class "content". After that, you can use flexbox, to put the class "content" on the bottom. After that, you can do it with hover to change your heigth upwards and fill it. With transition you can make a nice animation. I hope this is good enough. Perhaps there is also a way with jQUery at the moment I havn't got an idea. Let me know, if this helps you (I'm not sure if I understanded the question well) - Cheers. (Important: This heights and so on are just random values for testing)

.box {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  height: 100px;
  border: 1px solid red;
}
.content {
  background-color: #e3e4e6;
  height: 50px;
  width: 100%;
  text-align: center;
  -webkit-transition: height 1s;
  /* Safari */
  transition: height 1s;
}
.content:hover {
  height: 100%;
}

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

score 0 · Answer 3 · answered Jun 28 '16 at 10:07

0

If you just want to use css, just use:

.content:hover {
  margin-top: -50px;
  height: 110%;
}

See jsFiddle

answered Jun 28 '16 at 10:07

nik

2,114
3
22
43

i want the bottom of the div to remain in the same place. – Jun 28 '16 at 10:08
Just modify the height = to margin top https://jsfiddle.net/x3cL1cpt/8/ – Alexis Jun 28 '16 at 10:10

score 0 · Answer 4 · answered Jun 28 '16 at 10:11

since there isn't any space at top to expand, you may give an extra margin initially and remove it on hover like this JsFiddle -

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

}

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

.content:hover {
  height: 110%;
  margin-top:0;
}

score 0 · Answer 5 · answered Mar 25 '23 at 20:18

0

For me for some reason, when I tried to use transform and scale, it did not work. But what I did was I changed the font-size instead and it worked!

Something like this should work

div:hover {
   font-size: 40px;
}

answered Mar 25 '23 at 20:18

Nethan Karerakattil

79
4

score -1 · Answer 6 · answered Jun 28 '16 at 10:10

Set top property with the value of height - 100 * -1

https://jsfiddle.net/x3cL1cpt/7/

.content:hover {
  height: 110%;
  top: -10%;
  position: relative;
}

Why position relative? It's because I move the box, but without modifying the space that the box occuped. If you need to modify that space, change top with margin-top.

score -1 · Answer 7 · edited Jun 28 '16 at 11:53

-1

Replace this CSS with your current, needed to add transition:

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

.content {
    background-color: #e3e4e6;
    height: 100%;
    text-align: center;
    transition: 1s all ease;

}

.content:hover {
      transform: scaleY(1.2);
    transform-origin: bottom right;
}

edited Jun 28 '16 at 11:53

theblindprophet

7,767
5
37
55

answered Jun 28 '16 at 10:15

Piyush.kapoor

6,715
1
21
21

make div bigger and animate bigger section upwards on hover

7 Answers7

Linked