Css transition on element that changes position on mousehover

Question

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 transition property ?

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

Answer 1

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>