CSS Gradient Overlay Click-Through Issue - html

Question

I'm using this jQuery library to help stream a bunch of logos: SmoothDivScroll
Got it working great and I love it.
But I wanted to add just one more thing. I want a gradient overlay over the scroller so that on each side of the scroller the logos transition from white -> opaque -> white by the time it scrolls to the other side.
Something similar to this site: http://creativehero.es/
I got it working with the following code EXCEPT it kills my hyperlinks for each logo. I've tried messing around with pointer-events/z-index and I just can't get the overlay on top of the scroller and also have the logos in the scroller clickable. It's also always the same behavior across all modern browsers. Here's the CSS:
/* The scroll wrapper is always the same width and height as the containing element (div).
Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
z-index:-1;
pointer-events: visible;
}
div.scrollableArea
{
position: relative;
width: auto;
height: 100%;
pointer-events: visible;
}
#logoParade
{
width: auto;
height: 80px;
position: relative;
pointer-events: visible;
}
#logoParade a
{
display: block;
float: left;
margin-left: 15px;
margin-right: 15px;
margin-top: 8px;
margin-bottom: 8px;
pointer-events: visible;
z-index:210;
}
#logoParade img
{
height:65px;
width:auto;
pointer-events: visible;
}
#logoParade img:hover {
-ms-transform: scale(1.03,1.03); /* IE 9 */
-webkit-transform: scale(1.03,1.03); /* Chrome, Safari, Opera */
transform: scale(1.03,1.03);
}
.grad {
pointer-events: none;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgba(255,255,255,1) 1%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 80%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(255,255,255,1)), color-stop(20%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0)), color-stop(80%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 1%,rgba(255,255,255,0) 20%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 80%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,1) 1%,rgba(255,255,255,0) 20%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 80%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,1) 1%,rgba(255,255,255,0) 20%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 80%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(255,255,255,1) 1%,rgba(255,255,255,0) 20%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 80%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-8 */
}
And here's the html:
<div class="row grad" >
<div id="logoParade">
<div class="scrollWrapper">
<div class="scrollableArea" style="width: 6000px;">
#inherits umbraco.MacroEngines.DynamicNodeContext
#*
Macro Parameters To Create, for this macro to work:
Show:True Alias:mediaId Name:Media Folder ID Type:MediaCurrent
*#
#if (Parameter.mediaId == null)
{
#* Get the media folder as a dynamic node *#
var mediaFolder = Library.MediaById(5093);
if (mediaFolder.Children.Any())
{
#* for each item in children of the selected media folder *#
foreach (var mediaItem in mediaFolder.Children)
{
<img src="#mediaItem.umbracoFile" alt="#mediaItem.Name" />
}
}
}
</div>
</div>
</div>
</div>
I also want to add that adding z-index:-1 to either div element (scrollWrapper or scrollableArea) brings the gradient out in front of the scroller, but that is also the culprit not allowing my anchor tags to be clicked.