How to make reverse animation for after (css) pseudo-element?

Question

css

Greetings friends!
I apologize in advance for the possible banality of my question due to the lack of necessary knowledge ...
Task: to implement the menu in the form

image button

. When you hover over a menu item or activate it, the default image, from top to bottom, is filled with a different color + a link is displayed.
Implementation of Jsfiddle
Problem: when you hover over the mouse, everything works: the color (image) changes smoothly from top to bottom, and when the cursor is moved away, there is no animation, it just changes sharply to the original image.
PS: the project is being implemented using Jommla. I have minimal experience in web development, so if you offer a more gentle option, I will be glad to consider it :)
Good luck to everyone!

Answer 1

in transition - ease-out everywhere replace with ease-in-out