Fade bottom text while scroll to down with linear

Question

I have list of news articles so user know that there is some text in bottom. How i tried like this style="background: linear-gradient(360deg, rgba(135, 135, 135, 0) 0%, #878787 20%)"

but i am not getting what i want to achieve.

Here is screen how i want to get it

Now i am getting like this

Answer 1

You need to just update your .scss file like:

  .item-md{
    background: #878787;
    padding-right:15px !important;
    color: #fff !important;
  }

I think its solve your problem

Answer 2

Just apply it on an ::after pseudoelement. I create a snippet to illustrate. Create a wrapper with relative and ::after on it, and inside the scroll layer and the articles. Just easy.

.wrapper {
  position: relative;
}
.scroll {
  position: relative;
  height: 150px;
  overflow: auto;
}
.article {
  height: 80px;
  background: blue;
  margin: 10px;
}
.wrapper::after {
  content: " ";
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 1111;
  background-image: linear-gradient(transparent, #ccc);
  height: 50px;
}

<div class="wrapper">
  <div class="scroll">
    <div class="article">a</div>
    <div class="article">b</div>
    <div class="article">c</div>  
  </div>
</div>