14

How can I fade edges of a div with jQuery? Think of a carousel with images inside that slides horizontally. How can I fade out the left and right sides so that images near the edges disappears gradually.

Hope it's clear. :)

2
  • 3
    Perhaps you should post some code, so that people can make some suggestions on how to implement this effect? Aug 15, 2010 at 21:46
  • I can't find any sorry, but I supposed it can be done by putting elements over the slider with a png that would fade the content. Aug 16, 2010 at 14:34

6 Answers 6

19

Webkit browsers (i.e. Chrome and Safari) support a CSS property called -webkit-mask, which allows you to overlay an element with a CSS3 effect (i.e. a linear gradient).

The following stylesheet rule will apply a fading white edge to elements with the class .mask:

 .mask {
     -webkit-mask: -webkit-linear-gradient(
          left,
         rgba(255,255,255,0),
         rgba(255,255,255,1) 5%,
         rgba(255,255,255,1) 95%,
         rgba(255,255,255,0)
     );
 }

Unfortunately, this will only work in webkit-based browsers. If you want to support everything else (which you probably do), you might be best using transparent PNGs.

3
  • 1
    You have saved me from hours of useless coding. I love you.
    – Andy Dwyer
    Dec 15, 2012 at 11:49
  • 2
    Always happy to be of service :) vote it up if you like the answer! Dec 19, 2012 at 10:18
  • Thank you very much! This is the only way I found to fade out an anchor element so that it remains clickable.
    – Dmitry
    Dec 18, 2013 at 18:59
4

You could try an inset shadow on the div containing the images, or a single-pixel-wide box with an outset shadow to the left or right. You can have a series of shadows applied to the css for these outside elements, building up from a very transparent but wide shadow to a fairly opaque shadow. You can also apply these shadows to only one side of an element as well.

for inset: (you will have to make the overlay taller than the container for the images, but the same width, and float it overtop, if it is the same height the shadow will appear from all sides)

#container_overlay{
   box-shadow: inset 0px 0px 10px 10px white;
   z-index:5;// higher than the container with the images
}

for an element on either end, use normal box shadow.

#end_overlay{
    width:2px;
    box-shadow: 0px 0px 10px 10px white;
    z-index:5;// higher than the container with the images
}

float that left or right and it should work on any browser that understands overlay, and any without overlay will ignore it. I don't think you need to have anything inside these, so it would be an invisible object witht he shadow spilling out.

I've seen this used to modify the top and bottom region of several magazine apps, so the text looks like it disappears as it leaves the page.

1

You can use it to set several divs with decreasing transparency and put that into a mask over the item you want to fade out, as described here: http://www.bennadel.com/blog/1014-Creating-Transparent-Gradients-With-jQuery.htm

1

I think this might be the kind of thing you're looking for: http://hunyadi.info.hu/en/projects/sigplus/testsuite/30-sigplus-sliders

Rich

0

An easy way maybe to display a set of divs over the edges like vertical strips with different opacity levels, giving the impression of images being faded out.

1
  • The numbe rof divs you would need to make this work would (it think) make it incredibly slow. IF you visual are is a set size it would be easier to create a single masking image and overlay it on the "slide" area. Aside from that you might be able to use CSS3 gradients... assuming they support "transparent" at an endpoint but i dont know if thats the case, and obviously it wouldnt work in IE :-( Aug 15, 2010 at 22:27
0

Like Alex said, the easiest way is probably overlaying something to fade the underlying div out. I would however simply use a png transparent gradient.

This won't easily work within IE6 though, but there is always a way (personally I don't support IE6 anymore):

http://24ways.org/2007/supersleight-transparent-png-in-ie6

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.