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

i trying animate div upwards when user hovers on div.

i able animate div making bigger, animation happens downwards. trying keep bottom of div remain in same place, , have smooth animating increasing size of div upwards.

see jsfiddle here which demonstrates code 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>

you can using transform:scaley() , set transform-origin bottom. put margin-top:100px see effect better. can use transition make scale smoother

you need scale text.

see here: jsfiddle

you need scale text it's original state in same time scale div. if scale div 2 times. need scale text 1/2 , same if scale 3 times...scale 1/3

in case enlarge .content 1.5 need scale down text inside 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>