Как организовать (z-index), чтобы работал (:hover)?

Здравствуйте.
Помогите пожалуйста понять, как можно решить проблему с z-index.

У каждой карточки есть задний фон, который немного смещен.
Реализовал его через ::after.
Но при выставлении у этого псевдоэлемента "z-index: -1", этот задний фон скрывается не только за фоном карточки, но и за фоном родительского контейнера карточек.

Попробовал у родительского контейнера выставить тоже "z-index: -2".
Но тогда у карточек перестает работать ":hover".

Что я делаю не так и как это решить?
Спасибо

Код с прозрачным фоном родительского контейнера: https://codepen.io/hisbvdis/pen/oRLMWg
Код с белым фоном родительского контейнера: https://codepen.io/hisbvdis/pen/MdeBmq

5cd8114322bb9995433091.jpeg
  • Вопрос задан
  • 55 просмотров
Решения вопроса 1
qork
@qork
{ background: #F00B42 }
.cards-container{
    position: relative;
    z-index: 0;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы