Как реализовать такую фишку в слайдере?

Question

[Web Lizard]

Имеется вот такая штука с ховер эффектом. Все это еще при этом является слайдером



Но когда ховер происходит на боковые элементы случается фигня


А случается она потому, что это слайдер и у него есть враппер с overflow:hidden


Ну и если я уберу этот overflow: hidden происходит еще большая фигня


И так, вопрос знатокам:
Как в рамках этого слайдера реализовать такой эффект без бага с тенью и не убирая при этом overflow:hidden?

Answer 1

[sergey]

К примеру добавить дополнительную обертку слайду, и уже в ней вы будете отображать hover эффект.

Comments

[Web Lizard]

пробовал, тогда будет другой баг joxi.ru/gmvqd87FLnO37r

Это тогда сам JS код слайдера переделывать под это надо, а это запарно мягко говоря

[sergey]

Web Lizard: ничего не нужно в js менять, вы не правильно поняли

[Web Lizard]

SM: ну вот я отключил оверфлоу у одного враппера joxi.ru/4AkpJyGuyl3a3r
и добавил оверфлоу к родительскому врапперу (и паддинг тоже) joxi.ru/nAyqZn9FYbJ6oA
на выходе получаем хрень

Answer 2

[Николай]

Можно. Увеличь высоту блока до высоты выделенного элемента, а картинки в слайдере уменьшить исходя размеров и отступов. Можно немного переписать centerMode у слайдера и использовать под свои нужды, там обвертка добавляется.

Answer 3

[Кирилл Жулин]

а может бог с ним ))) вот неплохой вариант) просто фото поменять))
https://tympanus.net/codrops/2014/06/19/ideas-for-...