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?