Podés hacerlo con jQuery
Código HTML:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> img { border:0px; }
ul.img_list {
display:inline;
float:left;
height:280px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
li.image_on a {
display:block;
width:280px;
height:280px;
position:relative;
}
li.image_on a .rollover {
display:block;
position:absolute;
top:0;
left:0;
width:280px;
height:280px;
background:url(img_on.png);
}
<script type="text/javascript"> $(document).ready(function(){
$(".rollover").css({'opacity':'0'});
$('.img_list a').hover(
function() {
$(this).find('.rollover').stop().fadeTo(500, 1);
},
function() {
$(this).find('.rollover').stop().fadeTo(500, 0);
}
)
});
<li class="image_on"><a href="#"><span class="rollover"></span><img src="img_off.jpg" alt="" width="280" height="280" /></a></li>
saludos