Как сделать поверх картинки, текст с затемнением этой картинки?
Помещаете текст в псевдоэлемент к картинке. Делаете ему опасити 0 и цвет фона rgba(0, 0, 0, 0.5) (разумеется позиционируете правильно) Картинке ставьте transition по опасити. При ховере на картинку меняйте опасити у псевдоэлемнета.
Вот, но с форматированием кода и знаниями html у вас просто ужас какой-то. Нельзя элементы  оборачивать в ссылки, ссылки должны быть внутри. И jsfiddle сам добавляет табуляцию, за вас, чтобы смотрелось лучше и код можно было нормально читать — а вы её убиваете зачем-то. Слов нет.