How do I make Transition work in "round trip" when using Hover?

Asked

Viewed 485 times

0

I have this :hover here...

.novidades{
  background-color: #F5dcdc;
  background-color: #f5dcdc;
  background: linear-gradient(#f5dcdc, #bebef4);
  position: relative;
  bottom: 0;
}

.novidades:hover{
  bottom: 20px;
  transition: bottom 0.4s ease;
}

Like I do for the block .novidades get back in animation ease to the same place, rather than being "teleported" to the original place?

html css css3 css-transitions css-hover

1 answer

2


Put the transition in the original object, and not in :hover:

.novidades{
  display:block; height:100px; width:200px; /* só pra demonstrar */
  background-color: #f5dcdc;
  position: relative;
  bottom: 0;
  transition: bottom 0.4s ease; /* passamos a transition para cá*/
}
.novidades:hover{
  bottom: 20px;
}
<a class="novidades">Novidades</div>

Browser other questions tagged html css css3 css-transitions css-hover

You are not signed in. Login or sign up in order to post.