Ajude-me no CSS, Bípedes!

1 resposta
G

Tenho esse :hover aqui…


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


como eu faço pro block .novidades voltar em animação ease pro mesmo lugar, ao invés de ser “teletransportado” pro lugar original ?

1 Resposta

DarlanCaruso

Boa noite, amigo.
Com “teletransportado pro lugar original” você quis dizer fazer transição de volta pro estado original? Se for isso, basta repetir o código da transição na classe que não possui a pseudo-classe “:hover”.

<em>.novidades{</em>

<em>background-color: #F5dcdc;</em>

<em>background-color: #f5dcdc;</em>

<em>background: linear-gradient(#f5dcdc, #bebef4);</em>

<em>position: relative;</em>

<em>bottom: 0;</em>

<strong>transition: bottom 0.4s ease;</strong>

<em>}</em>

<em>.novidades:hover{</em>

<em>bottom: 20px;</em>

<em>transition: bottom 0.4s ease;</em>

<em>}</em>

Você pode alterar o efeito pra ser o inverso (top), ou o que preferir.
Abraço.

Criado 21 de fevereiro de 2016
Ultima resposta 1 de mar. de 2016
Respostas 1
Participantes 2