CSS3 adds "opacity" as an attribute. This attribute allows an HTML element to be opaque (opacity=1.0) or partially transparent ( 0.0 < opacity < 1.0 ), or completely transparent (opacity=0.0)

Here is a simple example where two images are placed on top of one another (using z-index and absolute positioning) and a slider to change the opacity of the top image:

and the slider like this:

<input type="range" min="0.0" max="1.0" step="0.01" name="s" onchange="c()" value="1.0"> Set opacity of the top image<span id="out">1.00</span>

The javascript code to receive the slider value of the top image's opacity and then reset the opacity and report the value:

opac=parseFloat(document.f1.s.value);
document.getElementById("i2").style.opacity=opac;
document.getElementById("out").innerHTML=opac;

Set opacity of the top image 1.00

We can make a slide show with the opacity attribute by stacking a group of images on top of one another and then using a timer show and hide the images in sequence with a fade-in/fade-out transition. Here are nine thumbnails of the images (reduced from actual 436 pixels wide to 100 pixles wide here):

007a.jpg

w166x.jpg

051a.jpg

059a.jpg

062a.jpg

076a.jpg

091a.jpg

w178.jpg

kisses.jpg

Here is the resulting timed slide shows each image for 7 seconds, then transitions to the next image using a 3 second fade-in-fade-out:

Here are the images on the page:

Here is the relevant javascript:

var cur_image_num;
var next_image_num;
var cur_opac;
var next_opac;
var fade_count;

function ss() // *** executed in <body onload="ss()"... tag
{
 cur_image_num=1;
 next_image_num=2;
 show_timer=setInterval ("show_it()",7000); // ** starts the image change timer every 7 secs
}

function show_it() // *** sets the opacity values and starts the fader timer
{
 cur_opac=1.0;
 next_opac=0.0;
 fade_count=0;
 fade_timer=setInterval("fader()",30) // *** runs 100 times 30 milliseconds each time
}

function fader()
{
 // *** sets the opacity of the current and next image
 document.getElementById("s"+cur_image_num.toString()).style.opacity=cur_opac;
 document.getElementById("s"+next_image_num.toString()).style.opacity=next_opac;
 // *** change the opacities by 0.01
 cur_opac=cur_opac-0.01;
 next_opac=1.0-cur_opac;
 fade_count++;
 if (fade_count>99) // *** if we are done, reset the image numbers and stop the fader
    {
     fade_count=0;
     clearInterval(fade_timer);
     cur_image_num=cur_image_num+1;
     next_image_num=cur_image_num+1;
     if (cur_image_num==9) 
        next_image_num=1;
     if (cur_image_num > 9) 
        {
         cur_image_num=1;
         next_image_num=2;
        }
    }
}