Transition with different time when hovering the mouse (Hover) and removing

Question

I have an image where I make a transition scale with hover, zooming in on the image by hovering the 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">

The transition time is half a second (.5s), but I would like that on the back (when taking the mouse over the image) it would take twice as long to return to the original size, ie 1 second.

Is it possible to do this only with CSS? Or how else to do it?

Answer 1

Have you tried to define the property of transition in the two css states, one with more and the other with less time?

See in your own example, when activating hover reduce the transition time:

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">

Note: I exaggerated a little in the values to make the difference clear.