Opacidad de colores en div

[etanol]

Hola a todos:

Tengo un div al que cuando se le pasa el puntero por encima de este quiero que se aclare el div.

El div esta formado por imagen, texto y backround de la siguiente forma:

Código CSS:

div.fondo { 
background-color: #000000;
}
 
div.fondo a { 
text-decoration: none;
display: block;
}
 
div.fondo a:hover { 
    opacity: .5;
    -moz-opacity: .25;
    filter:alpha(opacity=25);
width: 100%; /// le he agregado esto porque en IE no funcionaba sin esta propiedad
 
}
 

Código HTML:

<div class="fondo">
<a href="index.php">
<p>este es mi texto</p>
<img src="imagen.jpg">
</a>
</div>
<div class="fondo">
<a href="index.php">
<p>este es mi texto</p>
<img src="imagen2.jpg">
</a>
</div>
 

En Firefox aclara la imagen y el texto pero no el background.
En IE sucede lo mismo, pero además cuando pongo el puntero encima del 2º div, éste sube hasta quedar pegado al primero.

¿Cómo puedo solucionar lo de aclarar también el background?
¿Y cómo solucionar en IE para que el div no suba de posición cuando pongo el puntero encima de éste?

Muchas gracias