Как сверстать такую карточку?

Question

[Kipsi]

Подскажите пожалуйста как сделать подобную карточку. Есть слайдер на swiper. Мне нужно что бы при наведении на карточку внизу еще выезжал такой списочек, но у всех слайдеров стоит оверфлов хиден и соответственно списочка не видно, а убрать его нельзя так как будут видны слайды по бокам. Как можно сделать подобную штуку у слайдера?

Comments

[Ankhena]

Сделать паддинг для того блока, который с overflow на высоту выпадашек.
Т.е. либо высота выпадашки должна быть фикс либо выяснять её на js и задавать как паддингу. Через кастомные свойства это стало делать вполне удобно.

И одновременно задать отрицательный margin, чтобы следующий за слайдером блок начался в том месте, как будто выпадашек нету.

Но могут быть нюансы с z-index при затейливых дизайнах.

Answer 1

[Александр Макаров]

Сделай overflow-y: visible

Comments

[Kipsi]

Это просто создаст прокрутку внутри самого слайда при появлении списка

[Александр Макаров]

Kipsi, если у тебя всплывашка лежит в одном блоке то да, а вообще ты всплывашку можешь вынести вообще за слайдер и сделать что то вроде tooltip на js с абсолютным позиционированием

[Kipsi]

Александр Макаров, А это будет удобно потом человеку который будет на wp натягивать? Если учесть что на 1 странице по 4 таких слайдера с товарами.

[Александр Макаров]

Kipsi, poper. js супермаленькая библиотека как раз для таких целей. Есди напишешь коментарии что где и почему тогда проблем точно не будет