Как раскрыть дополнительные поля при наведении курсора на карточку товара, в слайдере?

Question

[franticstas]

Как сделать эффект при наведении курсора на карточку товара в слайдере? Использую Swiper слайдер. В макете карточка товара при наведении закрывает нижний блок, но так как это слайдер, то у всего слайдера свойство overflow: hidden. Плюс карточки это flex элементы и если растягивать один элемент за ним тянуться остальные.

Answer 1

[Rustam Bainazarov]

При наведении на карточку товара добавляйте класс к обёртке слайдера с вот этим:

.class {
   padding-bottom: 1000px;
   margin-bottom: -1000px;
}

К обертке класс нужно добавлять именно при наведении на карточку товара внутри слайдера, а не на саму обёртку, иначе вы столкнётесь с тем, что контент ниже слайдера будет перекрыт.

Никак иначе вы не обойдёте механизм overflow.

Сделал кустарный пример, чтобы было понятнее:

Comments

[franticstas]

Спасибо, попробую ваше решение и напишу о результате.

[Rustam Bainazarov]

franticstas, а у вас ноль вариантов иных, к сожалению. Любо вообще отказываться от overflow или же выносить карточки да проезды контейнера и как-то очень сложно на JS позиционировать их (понятное дело, так не надо делать).