How do I make the transition work on the "round trip" when using hover?

Navigation
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;
}

How do I make the block .novidades return in animation ease to the same place, instead of being "teleported" to the original place?

    
asked by anonymous 21.02.2016 / 15:26

1 answer

1

Put transition in the original object, not :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>
    
21.02.2016 / 15:58
Migration change only the default value of a field - Laravel JArray add values