Можно ли кроссбраузерно сделать исчезание слайда?

Question

[secretsergey]

Всем привет.
Сразу для наглядности приведу ссылку на codepen.
Имеется следующая задача. На странице сайта есть слайдер (slick) c следующими параметрами:

$('.slider').slick({
centerMode: true,
centerPadding: '50px',
arrows:false
});

Как видно по краям слайдера видны соседние слайды и для них требуется применить эффект исчезания.
Пример. Тут фото исчезает на сплошном фоне. Мне же надо соседние слайды растворить.
Если бы был фон сплошной (одним цветом), то можно было бы реализовать данную задачу через фоновый градиент, но как показано в примере на фоне стоит изображение. Реализовать можно через mask svg, но кроссбраузерности нет.
Буду благодарность за подсказку.

Желаемый результат (пример):

Comments

[Сергей delphinpro]

Keep it simple, stupid!

https://codepen.io/anon/pen/Ydywde

[secretsergey]

Сергей delphinpro, Вы не верно поняли задачу:)

[Сергей delphinpro]

secretsergey, а что не так?

[secretsergey]

Сергей delphinpro, Вот для примера сообразил в фотошопе по быстрому.

[Сергей delphinpro]

secretsergey, а, ясно. сорри

[Егор Живагин]

Сергей delphinpro, тоже сразу об этом подумал, но из примера кажется, что задача у автора всё таки другая

[secretsergey]

Егор Живагин, Добавил желаемый результат:)

Answer 1

[lamer350]

Накладываем :before поверх изображения с абсолютным позиционированием и применяем ему градиент через css

Comments

[secretsergey]

Градиент от чего к чему?:)

Answer 2

[Вадим Кот]

Кроссбраузерно нельзя, но есть mask-image для такого эффекта (пример https://codepen.io/anon/pen/QzjEgq ).
Но в рамках Graceful Degradation в браузерах, которые не имеют поддержки mask-image, будет отображаться версия без fading эффекта.
https://caniuse.com/#feat=css-masks

Comments

[secretsergey]

Написал об этом ещё в первом посте, но все равно спасибо за ответ:)