How to make an overlay on a slider?

Question

css

There is a swiper slider. It is necessary to make a transparent area that would not change when switching the picture. I tried to display an idea in AE. Tell me how you can do this)
https://gyazo.com/eddb24a7872cefe0f1a9f1c2e7ee1737
The point is that the area with the stripes is constantly transparent.

Answer 1

Wrap the slider in a div that has ::before absolutely positioned. And on it the background with this picture

Answer 2

Vitaly Kirenkov @DeLaVega
Wrap the slider in a div that has ::before absolutely positioned. And on it the background with this picture
That's right, it's the easiest way to do it. But then the slider will cease to be interactive, it will not be possible to scroll through the content with a swipe. If not, then OK.
Does not work. More precisely, it works while there is no slider. When connect:
You can’t put an overlay to the slides, you need to place it higher in structure. Otherwise, the SVG turned out well, although I think a regular picture will do.
And in order for all the functions of the slider to work, for example, when hovering on the slider, the overlay can be displayed. It will change dramatically, but the functionality of the slider will remain.

.slider::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('img/overlay.png') center / cover no-repeat;
  opacity:  0.5;
  z-index: 1;
}
.slider:hover::before {
  display: none;
}

There is another option to add this overlay not to the slider, but to each slide. But then the overlay will scroll along with the slides. Here you can simply change the slider's operation mode so that the slides do not appear with a shift, but through fear (there is such a thing in owl-carousel).
In general, choose)
Well, or do as Vitaly suggested.