Q:

Fading text in a Bootstrap popover

I'm currently working on designing a bootstrap popover that will allow users to comment on an aspect of page. The comments will be saved and posted to the top half of the popover. There are two sections to this popover - the comments in the header, and the comment section. 
The comments on top have to fade out at the bottom. Here's what it should look like: 
http://i.imgur.com/QRaCd7g.pngHere's what my current styling looks like: http://i.imgur.com/M4DAnEX.png
And here's my current markup (hardcoded comments)
<div>
    <div class="popover-title comment-popover-title">
        <div class="popover-title-header">
            ANDREW BARNETT
        </div>
        <div class="popover-title-content">
            Lorem ipsum dolor sit amet, his cu nominavi laboramus, cam impedit intellegam eu. Mel iudico adversarium ex, ut est choro.
        . 
        .
        .      
        .
    </div>

    <div class="popover-content comment-popover-content">
        <textarea class="popover-textarea" placeholder="Type a comment" onkeyup="Domain.Common.textCounter(this, '.count', 200);"></textarea>
        <div class="count">Remaining Characters: 200</div>
        <button type="submit" class="btn btn-default save-button save-button-inline-comment">SUBMIT</button>
    </div>
</div>

Any idea how to make this happened? Tried to gradient a background but I need something that goes over the text. Not sure, let me know what you think!

A:

I had to modify your HTML structure a little (and provide working CSS) but here is my try:
HTML:
<div>
    <div class="popover-scroller">
        <div class="popover-title comment-popover-title">
            <div class="popover-title-header">
                ANDREW BARNETT
            </div>
            <div class="popover-title-content">
                Lorem ipsum dolor sit amet, his cu nominavi laboramus, cam impedit intellegam eu. Mel iudico adversarium ex, ut est choro.
            </div>
        </div>
    </div>
    <div class="popover-fade"></div>
    <div class="popover-newcomment">            
        <div class="popover-content comment-popover-content">
            <textarea class="popover-textarea" placeholder="Type a comment" onkeyup="Domain.Common.textCounter(this, '.count', 200);"></textarea>
        <div class="count">Remaining Characters: 200</div>
        <button type="submit" class="btn btn-default save-button save-button-inline-comment">SUBMIT</button>
    </div>
</div>

CSS:
* {
    background: #202020;  
    color: #ffffff;
}

.popover-scroller {
    overflow-y: scroll;
    width: 10em;
    height: 5em;
}

.popover-fade {
    position:relative;
    height: 1em;
    bottom: 1em; /* same as the height */
    background: linear-gradient(rgba(32,32,32,0), rgba(32,32,32,255));
    width: 10em; /* same as the scroller width */
}

The biggest downside to this is the shadow overlaying the scrollbar at the bottom, but hopefully this will get you on the right track.

