How to make top and bottom of div transparent

Issue

I am making a div with a content longer than what I want to view in height, so I used a height of 20em, and made overflow:scroll. This work great, but I want to add some effect to it.

How can I do so the top and bottom 50px have a opacity of 0.7? so it gets a effect when the content is scrolled "away".

Thanks!

<div>
<ul>
   <li>long list here</li>
   <li>long list here</li>
   <li>long list here</li>
   <li>long list here</li>

</ul>

Style:

height:25em;
overflow:scroll;

Solution

DEMO

DEMO:

#wrapper {
    position: relative;
}
#wrapper:before, #wrapper:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 30px; /* Height of the effect */
}
#wrapper:before {
    top: 0;
    /* Use your background color, assuming white: */
    background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
}
#wrapper:after {
    bottom: 0;
    /* Use your background color, assuming white: */
    background-image: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
}
#mydiv {
    background: red;
    height: 20em;
    overflow: auto;
    border: 0 solid transparent;
    border-width: 10px 0; /* 10px to be able to read first and last lines */
}

<div id="wrapper">
    <div id="mydiv">
        Your content
    </div>
</div>

Answered By - Oriol