Андрей

Да хоть бы и .wrapper-item в него же вложен исчезающий/появляющийся блок, так что проблемы не вижу.
https://jsfiddle.net/oonpvhd4/

Не знаю насчет правильно/неправильно, я бы так сделал:
https://jsfiddle.net/rmmz9qhb/
отмерил ширину дополнительного появляющегося элемента и сдвинул весь псевдоэлемент влево на эту величину. вроде как в макете получилось, не?)

https://jsfiddle.net/dzwk03fc/
так?

Можно как-то так
https://jsfiddle.net/L4je4jvu/

Если ты серьезно,
https://jsfiddle.net/nf8o1k33/
:D
Наверное, стоит и на матчасть ссылку прикрепить:
htmlbook.ru/css/hover

Может это станет отправной точкой?
https://jsfiddle.net/np1ecv2h/1/

Пошаговый туториал:
product.hubspot.com/blog/how-to-build-a-sleek-anim...

Привет, в таком случае очень выручает flexbox со своим свойством order.

Не понятны такие строгие условия с абсолютным позиционированием всех блоков внутри родителя.
Может вот так подойдет: https://jsfiddle.net/ac00u8zL/ ? В родителе, который флекс колонка, растягиваем абсолютным позиционированием картинку и даем z-index: 15, а контент размещается так как ему и положено правилами с z-index: 20, например. Хотя лучше бы изображения которые будут фоном таки помещать в background.

Если же править твой jsfiddle то есть вариант JS'ом при загрузке замерять высоту у блока с контентом и присваивать ее блку с картинкой и родителю.