Applying a CSS transition for an image on :hover the effect is showing only when the mouse ‘enter’ the image and not when ‘exit’ from the hover state, here a gif:
@timmse I can’t understand: you’ve marked this solved because it’s not a bug, ok, let’s call it a ‘feature’ but even with the syntax proposed by @HeroRox I still have the same problem, don’t you?
I think you might need to be a little bit more clear on what you are hoping for.
If you set hover on an element then it does exactly what it is doing in your gif. It will move when the mouse cursor enters it and then it will go back to the original position when you move your cursor away.
I have a feeling you are hoping for something different however…but not sure what you want?
FYI The problem was that I was setting the CSS Transition field in the :hover state instead in the default one.
As @timmse suggest me in another post ( How to set CSS Transform Origin )
I’m glad that it works now, but I have a small request: can you please save your screen videos as a video next time? Because you can rewind, fast forward, and even pause it, which is not possible with a GIF
Ok, I made a gif because I don’t know where to host a video and link to it here. I don’t have vimeo or youtube account and the original screencast file was bigger then 4MB that is the max upload limit for the forum. Still looking for a solution for future screencast.
It’s been a while but still wanted to point out what I believe is the solution to @Aldo 's problem, for anyone having the same issue:
You should add the CSS Transition value to the element on it’s default state, not when the :hover state is active. This way the transition will apply for both mouse-enter and mouse-exit and not only for mouse-enter.
Hope this helps someone!
Ah I’m sorry I missed the message marked as the solution! So I actually didn’t bring any new help to the discussion
Thanks for your professional work, @timmse!