Jackymamouth Jackymamouth - 3 months ago 12
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
transition
property ?

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

Answer

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>

Comments