Is it possible to make a slide disappear cross-browser?

Question

css

Hello.
Immediately for clarity, I will give a link to codepen .
There is the following task. The site page has a slider ( slick ) with the following parameters:

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

As you can see, adjacent slides are visible along the edges of the slider and you need to apply a fade effect for them.
Example . Here the photo disappears into a solid background. I also need to dissolve adjacent slides.
If the background was solid (one color), then this task could be implemented through a background gradient, but as shown in the example, there is an image on the background. You can implement it through mask svg, but there is no cross-browser compatibility.
I'll be grateful for the hint.

Desired result (example):

Answer 1

Overlay :before on top of an absolutely positioned image and apply a gradient to it via css

Answer 2

It is not possible cross-browser, but there is a mask-image for such an effect (example https://codepen.io/anon/pen/QzjEgq ).
But as part of Graceful Degradation, browsers that don't have mask-image support will display the version without the fading effect.
https://caniuse.com/#feat=css-masks