I have a container with some clickable items, and at the bottom of the container, there is a gradient that I'm adding with .container:after
to create a fade effect. I would still like the items at the bottom to be clickable, but also to be affected by the fade, so putting the fade behind the clickable items won't work.
http://jsfiddle.net/mwjj7hff/1/
HTML:
<div class="container">
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
CSS:
.container {
border: 1px solid #ccc;
font-family: sans-serif;
height: 400px;
overflow: hidden;
position: relative;
width: 200px;
}
.container:after {
background: linear-gradient(to bottom, rgba(255, 255, 255, .3) 0%, white 100%);
bottom: 0;
content: " ";
height: 150px;
display: block;
position: absolute;
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
cursor: pointer;
margin: 3px;
padding: 3px;
text-align: center;
}
li:hover {
background: #99d;
}