[FIXED] How to make a text disapper under an image, after scrolling it up?

Issue

Is it possible to gradually hide the text from the website, after scrolling it up, under an image? Only by using HTML and CSS?

This is my body example:

<img src="./image.gif">
<p> some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... </p>

Solution

img{
  position:fixed;
  top:0;
  left:0;
}
/* or like this */
#grad{
  position:fixed;
  left:300px;
  top:0px;
  height:150px;
  width:300px;
  z-index:10;
  background:linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}

body{
margin-top:170px;
}

<img src="https://29comwzoq712ml5vj5gf479x-wpengine.netdna-ssl.com/wp-content/uploads/2020/01/default.svg">
<div id="grad"></div>

<p> some text to scroll up... some text to scroll up... some text to scroll up... some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... even more text to scroll up... even more text to scroll up... even more text to scroll up... even more text to scroll up... even more text to scroll up... even more text to scroll up... </p><p> some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... </p><p> some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... </p><p> some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... </p><p> some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... </p><p> some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... </p>

Answered By - Rmaxx

Answer Checked By - Mary Flores (PHPFixing Volunteer)