One of the things that you can easily do in print design but not on the Web is overlay text on an image or colored background, and change the transparency of that image so that the text fades into the background. But there is a property in CSS3 that will allow you to change the opacity of your elements so that they fade in and out: opacity.

How to Use the Opacity Property

The opacity property takes a value of the amount of transparency from 0.0 to 1.0.

0.0 is 100% transparent—anything below that element will show completely through. 1.0 is 100% opaque—nothing below the element will show through.

So to set an element to 50% transparent, you would write:

opacity:0.5;

See some examples of opacity in action

Be Sure to Test in Older Browsers

Neither IE 6 nor 7 support the CSS3 opacity property. But you're not out of luck. Instead, IE supports a Microsoft-only property alpha filter. Alpha filters in IE accept values from 0 (completely transparent) to 100 (completely opaque). So, to get your transparency in IE, you should multiply your opacity by 100 and add an alpha filter to your styles:

filter: alpha(opacity=50);

See the alpha filter in action (IE only)

And Use Browser Prefixes

You should use the -moz- and -webkit- prefixes so that older versions of Mozilla and Webkit browsers support it too:

-webkit-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;

Always put the browser prefixes first, and the valid CSS3 property last.

Test the browser prefixes in older Mozilla and Webkit browsers.

You Can Make Images Transparent Too

Set the opacity on the image itself and it will fade into the background. This is really useful for background images.

<img src="http://0.tqn.com/d/webdesign/1/0/Y/B/1/shasta.jpg" alt="Shasta" style="opacity:0.5;filter: alpha(opacity=50) ;" />

And if you add in an anchor tag you can create hover effects just by changing the opacity of the image.

a:hover img {
  filter: alpha(opacity=50)
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50)
  -moz-opacity: 0.5;
  -webkit-opacity: 0.5;
  opacity:0.5;
}

Affects this HTML:

<a href="#"><img src="http://0.tqn.com/d/webdesign/1/0/N/9/1/24-arrow-next.png" alt="next" style="width:24px;height:24px;border:none;" /></a>

Test the above styles and HTML in action.

Put Text on Your Images

With opacity, you can place text over an image and have the image appear to fade out where that text is.

This technique is a little tricky, because you can't simply fade the image, as that will fade the entire image. And you can't fade the text box, because the text will fade there as well.

1. First you create a container DIV and place your image inside:

   <div id="image">
  <img src="http://0.tqn.com/d/webdesign/1/0/Y/B/1/shasta.jpg" alt="Shasta" />
</div>

2. Follow the image with an empty DIV—this is what you'll make transparent.

   <div id="image">
  <img src="http://0.tqn.com/d/webdesign/1/0/Y/B/1/shasta.jpg" alt="Shasta" />
  <div id="text"></div>
</div>

3. The last thing you add in your HTML is the DIV with your text in it:

   <div id="image">
  <img src="http://0.tqn.com/d/webdesign/1/0/Y/B/1/shasta.jpg" alt="Shasta" />
  <div id="text"></div>
  <div id="words">This is my dog Shasta. Isn't he cute!</div>
</div>

4. You style it with CSS positioning, to place the text above the image. I placed my text on the left side, but you can put it on the right by changing the two left:0; properties to right:0;.

   #image {
  position:relative;
  width:170px;
  height:128px;
  margin:0;
}
#text {
  position:absolute;
  top:0;
  left:0;
  width:60px;
  height:118px;
  background:#fff;
  padding:5px;
}
#text {
  filter: alpha(opacity=70);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  -moz-opacity: 0.70;
  opacity:0.7;
}
#words {
position:absolute;
  top:0;
  left:0;
  width:60px;
  height:118px;
  background:transparent;
  padding:5px;
}

See how it looks