Проблема с отзывчивым CSSGrid и зависанием

Question

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

Вы можете увидеть страницу здесь и посмотреть на рабочем столе в мобильном режиме: http://lafabutineuse.flywheelsites.com/realisations

Я определил заголовок и ссылку на мое изображение как абсолютные и высоту деления 100%.

Код моего названия на картинке:

 h2 a, h2 {
    background: rgba(0,0,0,0);
    color: rgba(0,0,0,0);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    align-items: center;
    padding: 10px;
    padding-bottom: 10px!important;
    text-align: center;
    height: 100%;
    z-index: 10000;
    transition-property: background;
    -webkit-transition-property: background;
    transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
}

и тот же код при наведении, но с разными цветами:

h2 a:hover, h2:hover {
    background: rgba(224,197,76,0.61);
    color: white;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    align-items: center!important;
    vertical-align: middle;
    padding: 10px;
    padding-bottom: 10px!important;
    text-align: center!important;
    justify-content: center;
    display: flex;
    height: 100%;
    z-index: 10000;
}

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

У вас есть идеи, пожалуйста?

Спасибо

Answer 1

Вы явно не установили position для .et_pb_grid_item на экранах, меньших 980 пикселей - поэтому ваша ссылка при наведении занимает 100% .et_pb_portfolio_items.Установите position: relative; для .et_pb_grid_item, и это должно решить проблему при наведении.

.et_pb_grid_item {
    position: relative;
}