Fade edges of div with jQuery

jquery fade

Sandro Antonucci · Aug 15, 2010 · Viewed 8.4k times · Source

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. :)

Answer

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.

Fade edges of div with jQuery

Answer

Related questions