CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user6002037
user6002037

Reputation:

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>

Upvotes: 4

Views: 21682

Answers (7)

Mihai T
Mihai T

Reputation: 17687

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>

Upvotes: 11

Nethan Karerakattil
Nethan Karerakattil

Reputation: 103

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

Upvotes: 0

Piyush.kapoor
Piyush.kapoor

Reputation: 6803

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

Upvotes: -1

webta.st.ic
webta.st.ic

Reputation: 5169

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>

Upvotes: 3

Manoj Salvi
Manoj Salvi

Reputation: 2749

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

Upvotes: 0

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

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.

Upvotes: -1

nik
nik

Reputation: 2294

If you just want to use css, just use: 

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

See jsFiddle

Upvotes: 0

Related Questions