Rollover de capas con CSS

[aRojilla]

Hola,

¿Se puede hacer este rollover con CSS?

http://terra.es/personal7/zacatua/test/index.html

Lo he intentado de mil maneras y lo más que me he acercado ha sido este código:

Código HTML:

<!-- En la cabecera: -->

<style>

.miniatura {
margin:10px;
border-left:2px solid #5f5f5f;
border-top:2px solid #5f5f5f;
border-right:2px solid #dddddd; 
border-bottom:2px solid #dddddd;
}

div#debajo {
position:absolute;
visibility:visible;
z-index:98;
width:126px;
height:126px;
border:1px solid #5f5f5f;
background-color: #ff0000;
background-image:  url(fondo.gif);
background-repeat: no-repeat;
}

div#encima a:link, div#encima a:visited {
position:absolute;
visibility:visible;
z-index:99;
width:126px;
height:126px;
border:1px solid #5f5f5f;
background-color: #ff0000;
background-image:  url(fondo.gif);
background-repeat: no-repeat;
}

div#encima a:hover, div#encima a:active {
visibility:hidden;
}

</style>

<!-- En el cuerpo: -->

<table border="0" cellpadding="10" cellspacing="0"><tr><td>

<div id="debajo">
<a href="#" title="No link">
<img src="nikon-logo.gif" class="miniatura">
</a>
</div>

<div id="encima">
<a href="#" title="No link">
<img src="foto-h2.gif" class="miniatura">
</a>
</div>

</td></tr></table> 

A ver si alguien me puede echar una mano, se lo agradecería mucho!