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

Question

[Рома Зварич]

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

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

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

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

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

Comments

[Рома Зварич]

Кто-нибудь может помочь понять, в чем суть того, что было сделано в предложенном решении?
Или где про это можно почитать?

Answer 1

[display: block]

.cards-container{
    position: relative;
    z-index: 0;
}

Comments

[Рома Зварич]

Не подскажете, в чем суть того, что было сделано?
Или где про это можно почитать?
Спасибо