Как сделать этот блок?

Question

[Анатолий Саламатин]

Всем привет. Использую slick slider. Там 4 продукта в ряд. Надо, чтобы при наведении на каждый - появлялясь тенюшка. Вот пример https://codepen.io/FrontCoder/pen/jLqKzY

Как сделать так, чтобы была видна тенюшка внизу и по бокам у боковых элементов?

Внизу пример того как должна появляться тень. Заранее спасибо!

Answer 1

[George Postoronca]

если я правильно понял то надо добавить padding у блока slick-list

Comments

[Анатолий Саламатин]

Пробовал. Снизу тень появляется, но тогда становятся видны следующие элементы слайдера по бокам

[George Postoronca]

думаю что не получится из за overflow: hidden да и у блков нет margin

[Анатолий Саламатин]

George Postoronca: я знаю что overflow hidden стоит. Поэтому и спрашиваю вариант решения.

[George Postoronca]

вот один вариант но уже получится с margin между блоков! или просто добавить margin

[kulaeff]

Анатолий Саламатин А padding-bottom пробовали добавлять?

[Анатолий Саламатин]

kulaeff: Как сделать тень снизу - знаю. Не понимаю, как реализовать боковую у боковых элементов

[Анатолий Саламатин]

George Postoronca: ну тогда дизайн уже не тот который нужен. Заказчика такой вариант не устроит

[George Postoronca]

можно как то определить prev и next блок и убрать бордер для вида (то есть через padding у родителя)
тогда визуально будет норм!
другого варианта пока что не знаю!