Transparency using CSS is sketchy because IE, FF and Safari all deal with it differently. Fortunately, the CSS directives that each one uses do not mess with the others, so it's rather trivial to affect transparency in a browser-agnostic way.
I'm working with a new site where they wanted to fade-in and fade-out photos, but are uncomfortable with Flash. So I put together a demo for them and they loved it. It's somewhat inelegant, but works reliably across the 3 major browsers. You can see it demod here:
<html><body>
<style>
.trans0 { opacity:.0; filter: alpha(opacity=0); -moz-opacity: 0.0; }
.trans5 { opacity:.05; filter: alpha(opacity=5); -moz-opacity: 0.05; }
.trans10 { opacity:.10; filter: alpha(opacity=10); -moz-opacity: 0.1; }
.trans15 { opacity:.15; filter: alpha(opacity=15); -moz-opacity: 0.15; }
.trans20 { opacity:.20; filter: alpha(opacity=20); -moz-opacity: 0.20; }
.trans25 { opacity:.25; filter: alpha(opacity=25); -moz-opacity: 0.25; }
.trans30 { opacity:.30; filter: alpha(opacity=30); -moz-opacity: 0.30; }
.trans35 { opacity:.35; filter: alpha(opacity=35); -moz-opacity: 0.35; }
.trans40 { opacity:.40; filter: alpha(opacity=40); -moz-opacity: 0.40; }
.trans45 { opacity:.45; filter: alpha(opacity=45); -moz-opacity: 0.45; }
.trans50 { opacity:.50; filter: alpha(opacity=50); -moz-opacity: 0.50; }
.trans55 { opacity:.55; filter: alpha(opacity=55); -moz-opacity: 0.55; }
.trans60 { opacity:.60; filter: alpha(opacity=60); -moz-opacity: 0.60; }
.trans65 { opacity:.65; filter: alpha(opacity=65); -moz-opacity: 0.65; }
.trans70 { opacity:.70; filter: alpha(opacity=70); -moz-opacity: 0.70; }
.trans75 { opacity:.75; filter: alpha(opacity=75); -moz-opacity: 0.75; }
.trans80 { opacity:.80; filter: alpha(opacity=80); -moz-opacity: 0.80; }
.trans85 { opacity:.85; filter: alpha(opacity=85); -moz-opacity: 0.85; }
.trans90 { opacity:.90; filter: alpha(opacity=90); -moz-opacity: 0.90; }
.trans95 { opacity:.95; filter: alpha(opacity=95); -moz-opacity: 0.95; }
.trans100 { opacity:1.0; filter: alpha(opacity=100); -moz-opacity: 1.00; }
</style>
<table cellpadding="0" cellspacing="20" border="0" width="100">
<tr valign="top">
<td width="120" align="right">
<img src="/graphics/dot_clear.gif" height="1" width="120">
<input id="execButton" type="button" value="Fade In >>>" onClick="fade()">
</td>
<td><img id="test" src="/redcar.jpg" height="500" width="376" class="trans0"></td>
</tr>
</table>
<script>
step = 0;
adv = true;
function fade()
{
var target = document.getElementById('test');
var time = 20;
if (adv)
{
if (step < 100)
{
step += 5;
target.className = 'trans' + step;
setTimeout('fade()', time);
} else {
adv = false;
document.getElementById('execButton').value = 'Fade Out >>>';
}
} else {
if (step > 0)
{
step -= 5;
target.className = 'trans' + step;
setTimeout('fade()', time);
} else {
adv = true;
document.getElementById('execButton').value = 'Fade In >>>';
}
}
}
</script>
</body></html>
