Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at cf.Objective() 2010 (Minneapolis, MN) with: Doug Hughes and Ezra Parker and Dan Wilson and John Mason and Jason Dean and Luis Majano and Mark Mandel and Brian Kotek and Wil Genovese and Rob Brooks-Bilson and Andy Matthews and Simeon Bateman and Ray Camden and Chris Rockett and Joe Bernard and Dan Skaggs and Byron Raines and Barney Boisvert and Simon Free and Steve 'Cutter' Blades and Seth Bienek and Katie Bienek and Jeff Coughlin
Ben Nadel at cf.Objective() 2010 (Minneapolis, MN) with: Doug Hughes@doughughes ) , Ezra Parker , Dan Wilson@DanWilson ) , John Mason@john_mason_ ) , Jason Dean@JasonPDean ) , Luis Majano@lmajano ) , Mark Mandel@Neurotic ) , Brian Kotek , Wil Genovese@wilgeno ) , Rob Brooks-Bilson@styggiti ) , Andy Matthews@commadelimited ) , Simeon Bateman@simBateman ) , Ray Camden@cfjedimaster ) , Chris Rockett ( @RockettMan ) , Joe Bernard@JEBernard ) , Dan Skaggs@dskaggs ) , Byron Raines ( @byronraines ) , Barney Boisvert@barneyb ) , Simon Free@simonfree ) , Steve 'Cutter' Blades@cutterbl ) , Seth Bienek@sethbienek ) , Katie Bienek@KatieBienek ) , and Jeff Coughlin@jeffcoughlin )

Creating Transparent Gradients With jQuery

By Ben Nadel on

Reading though Learning jQuery by PACKT Publishing, I came across a good amount of really cool stuff. Their thorough, in-depth examples were really inspiring and got the machinery firing full blast. One of the cool things they did with jQuery that I would have never thought of doing in a million years was to create a transparent gradient over a list of rotating news items. In a technique that I believe (but am not sure) is also used by Foundeo's CFImageEffects ColdFusion component, they created a new DIV element for each step of the transparent gradient, each of which had a different opacity.

jQuery makes this task easy. There is some cross browser bugginess, but overall, it works OK. Running this HTML and jQuery code:

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <html>
  • <head>
  • <title>jQuery Gradient Fade Demo</title>
  •  
  • <!-- Linked Files. -->
  • <script type="text/javascript" src="jquery-latest.pack.js"></script>
  • <script type="text/javascript">
  •  
  • $(
  • function(){
  •  
  • // Get all of the gradient images and loop
  • // over them using jQuery implicit iteration.
  • $( "img.gradient" ).each(
  • function( intIndex ){
  • var jImg = $( this );
  • var jParent = null;
  • var jDiv = null;
  • var intStep = 0;
  •  
  • // Get the parent
  • jParent = jImg.parent();
  •  
  • // Make sure the parent is position
  • // relatively so that the graident steps
  • // can be positioned absolutely within it.
  • jParent
  • .css( "position", "relative" )
  • .width( jImg.width() )
  • .height( jImg.height() )
  • ;
  •  
  • // Create the gradient elements. Here, we
  • // are hard-coding the number of steps,
  • // but this could be abstracted out.
  • for (
  • intStep = 0 ;
  • intStep <= 20 ;
  • intStep++
  • ){
  •  
  • // Create a fade level.
  • jDiv = $( "<div></div>" );
  •  
  • // Set the properties on the fade level.
  • jDiv
  • .css (
  • {
  • backgroundColor: "#FFFFFF",
  • opacity: (intStep * 5 / 100),
  • bottom: ((100 - (intStep * 5) ) + "px"),
  • left: "0px",
  • position: "absolute"
  • }
  • )
  • .width( jImg.width() )
  • .height( 5 )
  • ;
  •  
  • // Add the fade level to the
  • // containing parent.
  • jParent.append( jDiv );
  •  
  • }
  •  
  • }
  • );
  •  
  • }
  • );
  •  
  • </script>
  • </head>
  • <body>
  •  
  • <h1>
  • jQuery Gradient Fade Demo
  • </h1>
  •  
  • <p>
  • Here is the image before we add the gradient:
  • </p>
  •  
  • <p>
  • <img
  • src="jumping_girl.jpg"
  • width="545"
  • height="386"
  • alt="Girl jumping in bikini"
  • />
  • </p>
  •  
  • <p>
  • Here is the image after we add the gradient:
  • </p>
  •  
  • <p>
  • <img
  • src="jumping_girl.jpg"
  • width="545"
  • height="386"
  • alt="Girl jumping in bikini"
  • class="gradient"
  • />
  • </p>
  •  
  • </body>
  • </html>

... we get these two images (the one without the gradient followed by the one with the overlayed gradient):


 
 
 

 
jQuery Transparent Gradient Example - Pre Gradient  
 
 
 

 
 
 

 
jQuery Transparent Gradient Example - With Overlayed Gradient  
 
 
 

Notice that the second one now fades to white at the bottom. The number of steps used in the fade was chosen arbitrarily. Using a 100 steps, each of which was 1 pixel high, seemed to work very poorly in IE. There might be a bit of a bug in the code, or it might be a bug in IE. Not sure. IE seems to almost anti-alias the DIV elements, keeping a soft edge. But regardless, I just thought that this was a really cool concept.

Tweet This Fascinating post by @BenNadel - Creating Transparent Gradients With jQuery Thanks my man — you rock the party that rocks the body!

Looking For A New Job?

100% of job board revenue is donated to Kiva. Loans that change livesFind out more »

Reader Comments

Why not just use a PNG image? It's pretty easy to apply with basic CSS (albeit requiring some hackyness to make IE work from 5.5-6.x)...

@Guy,

Certainly, I transparent PNG would be the easier, probably more consistent solution. However, I just wanted to point out that I thought this was a cool concept that I had never thought of before.

Did you test this in FF? I copied your code and it seems to work fine in IE but it does not show correctly in FF. It might have to do with the z-index.

@Bob,

What kind of error is it giving you. I haven't tested this in a while, but I am not seeing anything in the code that should have been considered deprecated in the newer versions of jQuery.

Sorry to have wasted your time on this. I was working off of some old examples. I went back to the examples in the download and it is now working for me. Thanks.

Great effect! is it possible to put a transparant .png instead of the #FFFFF backgroundcolor in your js?

So it can be used on gradient backgrounds?

@Frank,

I would actually be more inclined to use a PNG - just easier to accomplish. Plus, with IE6 pretty much dying in recent days, it's much less of any issue.

changing opacity of the div by mouse over on it:

$(document).ready(function(){
$("div#ID-of-this-div").hover(
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "0.4"}, "slow");
});

});