javascript - make div bigger and animate bigger section upwards on hover - Stack Overflow

admin管理员组

文章数量:1220497

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>

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>

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jun 28, 2016 at 10:36 Nhan 3,89566 gold badges3434 silver badges4040 bronze badges asked Jun 28, 2016 at 10:02 user6002037user6002037 3

• if you increase the height is gonna increase towards bottom. – Piyush.kapoor Commented Jun 28, 2016 at 10:08
• @Piyush.kapoor so how to i switch this behavior – user6002037 Commented Jun 28, 2016 at 10:08
• try this jsfiddle.net/pkapoor1989/utqdpfcz/1 – Piyush.kapoor Commented Jun 28, 2016 at 10:16

Add a comment  | 

7 Answers 7

Sorted by: Reset to default 11

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);
  transform-origin: top;
}

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

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

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>

If you just want to use css, just use:

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

See jsFiddle

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;
}

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;
}

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.

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;
}

本文标签： javascriptmake div bigger and animate bigger section upwards on hoverStack Overflow