Как сделать ссылку с текстом, в которой контентная картинка на фоне?

Question

[Patrik420]

Не судите строго.
Практикуюсь, гриды не знаю. Флексами 2 колонки сделал и создал что то такое.

Помогите с структурой, как сделать не могу додуматься... Вот такой вот блок
Фотки в центре "CТЕНЫ" (фон) контентные, 2-3 фотки на фоне это уже 1 целая, то есть стена бэкграунд, а картинки внутри в html, чтобы менять.
Вся картинка это ссылка и при наведении на картинку текст меняет цвет. Резиновые изображения должны быть.
Не знаю как сделать структуру, первый раз с таким сталкиваюсь и голову ломаю второй день. Помогите добрые люди.

Comments

[0xD34F]

3.1, 3.8

[Ankhena]

Не знаю как сделать структуру, первый раз с таким сталкиваюсь и голову ломаю второй день.

Разметка у вас с виду написана.

Если сменить флекс на грид, то можно избавиться от лишних оберток.

Только этот сервис запрещает размещать код картинками, поэтому имеет смысл быстренько заменить его на ссылку на песочницу (codepen.io), в которой видно проблему. Картинки можете вставить любые из Яндекса или воспользоваться заглушками https://picsum.photos/

Вся картинка это ссылка и при наведении на картинку текст меняет цвет.

Для этого используются соседние селекторы вида img:hover + span

Резиновые изображения должны быть.

Для этого пишут что-то типа width: 100% и/или используют object-fit

p.s. зачем вы пишете source для png просто дублируя картинку из img, это что за фокус?