Всем привет.
Сразу для наглядности приведу ссылку на
codepen.
Имеется следующая задача. На странице сайта есть слайдер (
slick) c следующими параметрами:
$('.slider').slick({
centerMode: true,
centerPadding: '50px',
arrows:false
});
Как видно по краям слайдера видны соседние слайды и для них требуется применить эффект исчезания.
Пример. Тут фото исчезает на сплошном фоне. Мне же надо соседние слайды растворить.
Если бы был фон сплошной (одним цветом), то можно было бы реализовать данную задачу через фоновый градиент, но как показано в примере на фоне стоит изображение. Реализовать можно через mask svg, но кроссбраузерности нет.
Буду благодарность за подсказку.
Желаемый результат (пример):