Как сделать обратную анимацию для псевдоэлемента after (css)?

Question

[appcent]

Приветствую друзья!
Заранее извиняюсь за возможную банальность своего вопроса ввиду отсутствия необходимых знаний...
Задача: реализовать меню в виде

кнопка-изображение

. При наведении курсора мыши на пункт меню или его активации, изображение по умолчанию, сверху-вниз, заливается другим цветом + отображается ссылка.
Реализация Jsfiddle
Проблема: при наведении курсора мыши все работает: плавно меняется цвет(изображение) сверху-вниз, а при отведении курсора анимации нет, просто резко изменяется на исходное изображение.
PS: проект реализовывается по средствам Jommla. Опыт веб-разработки у меня минимальный, ввиду этого если вы предложите более щадящий вариант, буду рад рассмотреть :)
Всем добра!

Comments

[Ankhena]

Выложите, пожалуйста, действующий пример на jsfiddle.net

[appcent]

Ankhena, сделал
Jsfiddle

Answer 1

[TheRevan]

в transition - ease-out везде заменить на ease-in-out

Comments

[appcent]

не помогло :(