Как поместить h3 на картинки?

Question

[Crushing]

Есть верстка: https://uzinouzi.github.io/Atia/

Как поместить элементы h3 на картинки, чтобы они располагались таким образом:

и при этом при адаптиве эти заголовки не улетали.

Все картинки обернуты в див с определенным классом, пробовал этому классу задать position:relative, а заголовкам position:absoulute, но дело в том, что при адаптиве все крушиться.

Answer 1

[I'm Yoda]

Посмотрел вашу верстку! В вашем случае будет лучше обернуть картинку еще одним div.img-wrap {display: inline-block; position: relative;}, а для h3 {position: absolute; bottom: 20px; left: 20px;}. У картинок убрать отступы! И сделать padding у div.imgFlexPlaces

Comments

[Crushing]

Вы о чем?

[I'm Yoda]

Crushing, rfhnbyrf картинка почему то не появлялась)

[Crushing]

буду пробовать.

Answer 2

[Карен Мнацаканян]

margin-top:-50px; не поможет ?

Comments

[Crushing]

Это тут причем вообще?

[Карен Мнацаканян]

Crushing, а при том что можно и отрицательно задать margin чтоб выровнять в контейнере элемент. Вот при чем.

Answer 3

[Максим]

https://codepen.io/anon/pen/bYWqKp если вдруг это не адаптивно - скриншот покажите мне