Jackymamouth Jackymamouth - 1 year ago 82
CSS Question

Css transition on element that changes position on mousehover

I have a Box that elevates when the user has his mouse hovering this box, and I do this with :

.box:hover{ position: relative;
top: -10px;

I would like to know if it possible to make a smooth transition with the
property ?

If not, How should i go about getting this smooth effect ?

Answer Source

You can use the CSS transition property. Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

Here is an example:

.box {
  background: red;
  height: 50px;
  position: relative;
  top: 50px;
  transition: top 1000ms ease-in;
  width: 50px;
.box:hover {
  position: relative;
  top: 0;
<div class="box">Hey</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download