Fade Bottom Text While Scroll To Down With Linear Gradient

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%

Solution 1:

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;
}

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

Solution 2:

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