0

On our site we have a "News and Information" section at the top of our landing page. Right now it looks like this:
news.PNG
I'd like to change this to look something like the image below, but I'm having a hard time figuring out how to do this, or if it's even possible?
I am using bootstrap CSS as much as possible, but I don't see anything like this in their documentation.
Any thoughts or ideas would be GREATLY appreciated!
news3.png

3
Contributors
5
Replies
41
Views
1 Year
Discussion Span
Last Post by zachattack05
0

gentlemedia,

Thanks for the reply!

I don't necessarily want the scrollbar control itself to "fade". The scrollbar can always be visible, I was talking more on the lines of having the content itself "fade" at the bottom of the div tag. Like this:
5832e2c5b5d674c5e3381f713a77bd4e.png

0

There's a quite simple "workarround" for this. Just put a div on the bottom to act like an "fader".

Take a look on a simple example: https://jsfiddle.net/alemonteiro/ffko2g45/1/

The background on the fader div could be just an rgba(255, 255, 255, 0.5), but I tought an actual gradient would look better.

Anyway, you can change the background to improve it's look.

Edited by AleMonteiro

2

Instead to hard code an empty div tag at the bottom for the fade effect, you could also use a pseudo element (:before or :after) for your CSS gradient.

.scroll-div {
    position: relative;
    height: 500px;
    overflow: auto;
}

.scroll-div::after {
    content: " ";
    position: absolute;
    z-index: 1000;
    width: 100%;
    height: 80px;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%)
}

Edited by gentlemedia

Votes + Comments
Better yet =)
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.