Как правильно позиционировать блоки?

Question

[Кирилл Трифонов]

На сайте есть блок такой блок -


При hover-эффекте на блок стоит такой эффект -


Из-за того что изображение бамбука перекрывает блоки, не срабатывает эффект при наведении.

Подскажите как сделать, чтобы все работало и при этом адаптивность не сломать.
Сайт

Comments

[sergski]

переделайте лучше с border-image

[Кирилл Трифонов]

sergski: Точно я вообще забыл о таком способе, спасибо :D

Answer 1

[Ankhena]

https://webref.ru/css/pointer-events бамбуку

Comments

[Кирилл Трифонов]

Спасибо! Это то что нужно было.

Answer 2

[Павел]

Z-index у класса повысьте до 60

.category .wrapper .in-wrap {
    width: 920px;
    height: 480px;
    max-height: 480px;
    margin: 0 auto;
    position: relative;
    z-index: 60;
    text-align: center;
    overflow: hidden;
}

Comments

[Кирилл Трифонов]

Тогда перекрывают изображения бамбук и он получается обрезанным, так я уже пробовал.

[Павел]

Кирилл Трифонов: оперируйте размерами, по другому врятле выйдет, ну и с адаптивностью чуть придется повозиться

.category .wrapper .item-wrap:nth-child(1) .img-bg {
    max-width: 215px;
    left: 7%;
}
mixins.styl:4
.category .wrapper .item .img-bg {
    position: absolute;
    top: 13px;
    left: 0;
    width: 100%;
    height: 454px;
    z-index: 30;
}