Take the 2-minute tour ×

I have a horizontal list of images that is scrollable in x direction only. At the end of the right side a have a css gradient to show that there is more content. (scrollbar will be removed and may not be obvious that is is scrollable content)

I have changed the cursor to pointer on list items to show that they will lead to a different page if clicked. the right side behind the gradient is blocked from the cursor change and z-index wont fix the problem.

Any help is much appreciated!

    /*background: -moz-linear-gradient(left center, transparent, white);*/
          /* webkit example */
        background-image: -webkit-gradient(
          linear, right top, left top, from(rgba(255, 255, 255, 1.0)),

        /* mozilla example - FF3.6+ */
        background-image: -moz-linear-gradient(
          right center,
          rgba(255, 255, 255, 1.0) 20%, rgba(255, 255, 255, 0) 95%

        /* IE 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColorStr=#FFFFFF

        /* IE8 uses -ms-filter for whatever reason... */
        -ms-filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColoStr=#FFFFFF

example here

share|improve this question
add comment

2 Answers

You can set the css property pointer-events: none on your gradient div. This should solve it.

share|improve this answer
Please note that pointer-events has limited browser support though. –  Strille Jan 11 '13 at 22:13
Unfortunately, no clean solutions. Off the top of my head, I could think of a solution where you make your gradient div have a click event. You could then calculate based on the mouse position and your list of images scroll position, what image they would've clicked on if the gradient wasn't overlapping it. –  joeltine Jan 11 '13 at 22:27
add comment

I think the easiest solution is probably joeltine's suggestion to add a click event to the gradient and then determine if an image was below the clicked point on the gradient and fire that event.

Another solution would be to:

  • place an absolute positioned gradient in each list element (above the image)
  • give the list element overflow: hidden (so the gradient is clipped inside the li)
  • then based on the scroll position update all gradient positions inside the list elements based on the position of the list element.

The drawback of this approach is that the gradient position will be updated with js instead of css, which means it could lag behind for an instant when scrolling, and that having a lot of images could hurt performance since each image has its own gradient.

Just remove the gradient div from your html, then change the li css to:

li {
  cursor: pointer;
  overflow: hidden;

And add the following script:

function setupGradient($ul) {
  var gradientWidth = 250;

               .css("width", gradientWidth)

  var setGradient = function(){
    $ul.find("li").each(function() {
         .css("left", $ul.width() - $(this).position().left - gradientWidth);

  $ul.bind("scroll", setGradient);


Here's an working demo (only tested in Chrome):


share|improve this answer
add comment

Your Answer


