Затухание при наведении изображения не работает (css) ⇐ Html

[Anonymous]

Я делаю портфолио для класса и пытаюсь создать анимацию постепенного появления и исчезновения непрозрачности с помощью CSS для некоторых изображений, которые действуют как ссылки. Мне удалось сделать постепенное появление при наведении курсора, но не исчезновение, когда мышь покидает изображение, оно просто мгновенно снова устанавливает непрозрачность на 1.
Я последовал ответу на другой вопрос и создал JSFiddle (изображения и ссылки не те, что я создаю в реальной сети, но структура затронутых объектов такая же), чтобы вы поняли, что я имею в виду.
Я пробовал размещение перехода в основной статье .proyectos div с теми же результатами. При размещении его в body main .proyectos div Article img или body main .proyectos div Article a img он вообще не работает, даже постепенное появление.
Эта часть сети НЕ имеет кода JavaScript, прикрепленного ни к одному из ее элементов.

Подробнее здесь: https://stackoverflow.com/questions/798 ... orking-css