Всем привет. Использую slick slider. Там 4 продукта в ряд. Надо, чтобы при наведении на каждый - появлялясь тенюшка. Вот пример
HTML
<div class="container">
<div class="slider">
<div class="js-slider">
<div class="slider-item">
<p>lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus, quod quibusdam porro veritatis sed dolores totam! Quam explicabo, laboriosam atque, perferendis ipsam vitae minima veniam repellendus est natus hic corrupti.</p>
</div>
<div class="slider-item">
<p>lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus, quod quibusdam porro veritatis sed dolores totam! Quam explicabo, laboriosam atque, perferendis ipsam vitae minima veniam repellendus est natus hic corrupti.</p>
</div>
<div class="slider-item">
<p>lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus, quod quibusdam porro veritatis sed dolores totam! Quam explicabo, laboriosam atque, perferendis ipsam vitae minima veniam repellendus est natus hic corrupti.</p>
</div>
<div class="slider-item">
<p>lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus, quod quibusdam porro veritatis sed dolores totam! Quam explicabo, laboriosam atque, perferendis ipsam vitae minima veniam repellendus est natus hic corrupti.</p>
</div>
<div class="slider-item">
<p>lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus, quod quibusdam porro veritatis sed dolores totam! Quam explicabo, laboriosam atque, perferendis ipsam vitae minima veniam repellendus est natus hic corrupti.</p>
</div>
</div>
</div>
</div>
<div class="slider-item slider-item--example">
<p>lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus, quod quibusdam porro veritatis sed dolores totam! Quam explicabo, laboriosam atque, perferendis ipsam vitae minima veniam repellendus est natus hic corrupti.</p>
</div>
CSS
* {
box-sizing: border-box;
}
.container {
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
.slider {
border-left: 1px solid #808080;
margin-left: -1px;
}
.slider-item {
padding: 10px;
border: 1px solid #808080;
margin-left: -1px;
}
.slider-item:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.9);
}
.slider-item.slider-item--example {
width: 100%;
max-width: 400px;
margin: 50px auto;
}
.slick-list {
padding: 10px 0;
}
JS
$(document).ready(function(){
$('.js-slider').slick({
slidesToShow: 4,
slidesToScroll: 1
})
})
Как сделать так, чтобы была видна тенюшка внизу и по бокам у боковых элементов?
Внизу пример того как должна появляться тень. Заранее спасибо!