Opacity in bottom of the text while scrolling

Question

I want to put Opacity on the bottom of this text and it should stay so while scrolling, but when I scroll at the end it should be seen. How can I do this ?

Here is my code:

//html

large text goes here



//css

     #wrapper {
            height: 600px;
            width: 700px;
            overflow: auto;
            position: absolute;
            left: 25%;
              }

Answer 1

Add this to the #wrapper CSS:

-webkit-mask-image: -webkit-gradient(linear,left 20%,left bottom,from(black),to(rgba(0,0,0,0)))

Demo here

Answer 2

For a cross-browser ( Internet Explorer greater or equal than 10 ) solution you can do something like this:

HTML

<div>
  content here
  <div class="overlay"></div>
</div>

CSS

.overlay {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 200px;
    width: 100%;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}

jsfiddle