Как правильно задать z-index блоку?

Question

[Андрей Широких]

Всем доброго времени суток.
Выдержка вёрстки:
https://codepen.io/blackerandrew/pen/xxROyyZ
Вопрос, почему первая картинка при наведении остаётся на переднем плане? Точнее, в блоке hover'а текст правильно выставлен на передний план, а фон не хочет никак перекрывать картинку. Что сделать, подскажите?
Эта часть вёрстки по идее должна решить проблему, но не решает:

.about-photo1-mobile:hover,
{
  z-index: 10;
}

Answer 1

[Вадим]

Теория

хотфикс решение:

.about-photo1-mobile:hover .about-photo1-hover {
    display: block;
    width: 762px;
    height: 722px;
    left: calc(50% - 332px/2 - 1px);
    background: rgba(237, 231, 230, 0.9);
    margin-top: -380px;
    padding-top: 47px;
    transform: translate3d(0,0,0); /* new */
}