feather div edges over background images - html

Question

So I have an image slider behind a div with scrolling text content. I want the edges of the scrolling text div to feather into whatever is displaying behind it, so the text appears/disappears nicely when it scrolls in/out.
I tried adding an inset box shadow and linear gradients, but when the scrolling text has a transparent background you can see the shading around the text, fading into black, rather than transparent.
This is what I have:
This is what I want:
How do I do it with CSS?
You shouldn't need my code as it's not a bug, but here's some anyway.
<style>
#slider, #text, #text_overlay {
position:absolute;
width: 100%;
}
#slider {
height: 350px;
}
#text, #text_overlay {
top: 200px;
height: 100px;
}
#text {
z-index: 10;
}
#text_overlay {
z-index: 20;
background-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 3%, rgba(0,0,0,0) 97%, rgba(0,0,0,1) 100%);
}
</style>
<div id="slider">
<img src='https://www.w3schools.com/howto/img_fjords.jpg' />
</div>
<div id="text">Some text etc blah blah blah</div>
<div id="text_overlay"></div>

Answer 1

Solved this issue using -webkit-mask-image and a gradient as the mask on the text div. No need for the text_overlay div anymore, and works with changing backgrounds :)
#text {
-webkit-mask-image: linear-gradient(
to right, /* gradient direction */
rgba(0,0,0,0) 0%, /* transparent left 3% */
rgba(0,0,0,1) 3%, /* visible in the middle start */
rgba(0,0,0,1) 97%, /* visible in the middle end */
rgba(0,0,0,0) 100% /* transparent right 3% */
);
}
Full code:
<style>
#container {
position:relative;
height: 350px;
width: 100%;
}
#slider, #text {
position:absolute;
width: 100%;
}
#slider {
height: 100%;
}
#text {
top: 200px;
height: 100px;
z-index: 10;
-webkit-mask-image: linear-gradient(
to right, /* gradient direction */
rgba(0,0,0,0) 0%, /* transparent left 3% */
rgba(0,0,0,1) 3%, /* visible in the middle start */
rgba(0,0,0,1) 97%, /* visible in the middle end */
rgba(0,0,0,0) 100% /* transparent right 3% */
);
}
</style>
<div id="container">
<div id="slider">
<img src='https://www.w3schools.com/howto/img_fjords.jpg' />
</div>
<div id="text">Some text etc blah blah blah</div>
</div>