Блоки на грид, для медиа, при наведении срабатывает эффект, показываем заголовок, как поправить кривизну?

Question

[Антон Вебсайтовский]

Всем привет, сделал блоки на грид, применил эффект, при наведении показывает заголовок.
Проблема в следующем данный эффект влияет на блоки грида и фото не растягивает как надо.

если тут убрать display:block;, то блоки становятся ровные, но сам эффект появления заголовка портится, заголовок видно где-то снизу, а не по центру.

.hoverimage a {
  position: relative;
  z-index: 1;
display:block;
  text-align: center;
  background: #fff;
}

щас вид такой, видно что они все не ровные.


Рабочий пример тут:
https://codepen.io/AXOT/pen/eYjXJZY

Я стремлюсь к такому виду, ну и чтоб эффект работал при наведении, показывало заголовок по центру фото.

Comments

[hesrun]

Нужно видеть весь html и стили...

Предположительно, нужно тянуть фотки на высоту и чтоб не бились добавлять background-size

[Антон Вебсайтовский]

hesrun,
Рабочий пример тут:
https://codepen.io/AXOT/pen/eYjXJZY

[Александр Васильев]

в этом случае, поставь .hoverimage a - height: 100%

[Антон Вебсайтовский]

Александр Васильев, кстати, сработало, спасибо.