Очень интересно, почему текст подписи вы считаете неконтентным, а картинку не имеющую смысла наоборот, контентной?
И с семантикой проблемы. Это ведь список, а не разрозненные div. А может ещё и ссылки на разделы портфолио.
Итого: список, в каждом элементе либо <a> либо <span> (буду называть текстовым блоком). Картинка псевдоэлементом.
Каждый элемент это грид в одну ячейку. (Раньше это делали абсолютами, теперь это не нужно) Внизу псевдо с картинкой, наверху текстовый блок
В начальном положении текст прозрачный, при наведении меняется.
Можно менять прозрачность всего блока или только фона.
