4

Tenho uma imagem onde eu faço um transition scale com hover, dando um zoom na imagem ao passar o mouse:

img{
   width: 200px;
   height: 100px;
   transition: transform .5s ease;
}

img:hover{
   transform: scale(1.5);
}
<img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">

O tempo da transição é de meio segundo (.5s), mas eu gostaria que na volta (ao tirar o mouse sobre a imagem) ela demorasse o dobro do tempo para voltar ao tamanho original, ou seja, 1 segundo.

É possível fazer isso apenas com CSS? Ou como faria isso por outro meio?

1 Resposta 1

4

Já tentou definir a propriedade de transition nos dois estados do css, uma com mais e outra com menos tempo?

Veja no seu próprio exemplo, ao ativar o hover reduzo o tempo de transição:

img{
   width: 200px;
   height: 100px;
   transition: transform 5s ease;
}

img:hover{
   transform: scale(1.5);
   transition: transform 1s ease;
}
<img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">

Nota: Exagerei um pouco nos valores para deixar a diferença nítida.

1
  • 1
    Legal cara. Era isso mesmo que eu tava atrás. ObG!
    – Meu ovo
    14/06/2018 às 4:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .