Как сделать анимацию текста в изображении?

Question

[mr jeery]

Создал сетку изображений с помощью flex https://codepen.io/Jeerjmin/pen/QayLqZ
И хочу чтобы появлялся текст при наведении:
как здесь jsfiddle.net/8h177njo/.
или здесь https://webdesigncup.net/demowp/luminis/portfolio-...
Но тут пользуются background для наполнения блока, что не удобно. тк я буду добавлять фотографии 1920х1080, а в ручную обрезать не хочется.

Сложность в том, что я не понимаю как задать расположение таким образом, чтобы текст был всегда в центре фото ?

Comments

[Антон Спирин]

По-хорошему лучше использовать background: url('...'); + backgound-size: cover;
Добавлять изображения 1920х1080, если собрались показывать их с максимальной шириной 600px, не стоит.

[mr jeery]

Антон Спирин, Да, вы правы. А можете пример показать ?

[Антон Спирин]

mr jeery, вы сами в вопросе привели отличный пример https://webdesigncup.net/demowp/luminis/portfolio-...

Answer 1

[prodavec macdonalds]

https://codepen.io/prodavecmacdonalds/pen/GyoKYQ?e...

Comments

[Dima Polos]

Еще как варианты, можно текст поместить в тег p или div, задать ему text-align: center; display: inline-block; width: 100%; vertical-align: middle.
Третий вариант, это поместить текст в div или p, задать position: absolute, width: 100%; а вместо height - line-height равный высоте блока, если блоку можно задать высоту жестко без проблем потом в адаптивке.