Transition with different time when hovering and removing

Question

Navigation

#1 by (3 votes)

3

I have an image where I make a transition scale with hover , zooming in the image when 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 it to take about twice as long to return to its original size, ie 1 second.

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

css

asked by anonymous 14.06.2018 / 05:48

1 answer

OSMAR library error (OpenStreetMap) Delete specific ids in querySelectorAll

score 3 · Accepted Answer

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

See in your own example, activating hover reduces 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 the values a bit to make the difference clear.