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

[sanxuan]

Revisa el CSS. La opacidad se la has declarado al elemento a:hover no a div.fondo.
Si añades una regla div.fondo:hover con la opacidad correspondiente debería funcionar, pero no tendrá mucho sentido si no hay nada detrás que aparezca al pasar el ratón.

[etanol]

Gracias por responder.

La opacidad se la he declarado a hover porque el efecto que quiero conseguir es que cuando el puntero pase encima sólo entonces produzca opacidad (es decir, se aclare la imagen)

Lo que quiero decir es que no se aclara el background cuando pongo el puntero encima del div.

No se si se me ha entendido.

[Ciel]

No se si te puede ayudar esto, pero quizas si... lo que podrias hacer con el tema del background es hacer uso al rgba() de CSS 3... seguramente esta no es la solucion completa pero, por si las dudas lo menciono.

Mas info aca: http://www.desarrolloweb.com/articul...gba-css-3.html

[sanxuan]

Lee de nuevo mi respuesta. No sé si estaremos hablando el mismo idioma.
Quizás seo yo quien no te ha entendido, pero cuando he probado antes de contestarte, tu página hacía lo que tú esperabas, el fondo de color negro se volvía gris gracias a la transparencia. La probé en FireFox y en IE (las últimas versiones).
Le dí la misma transparencia que le habías asignado al enlace (tu regla a:hover). Te escribo el código CSS:

div.fondo:hover {
opacity: .5;
-moz-opacity: .25;
filter:alpha(opacity=25);
}

[etanol]

Gracias sanxuan, los dos hablamos castellano pero no te entendía.

Te cuento, en firefox va perfecto pero en IE no hace el efecto.

Código CSS:

div.fondo { 
background-color: #000000;
}
 
div.fondo a { 
text-decoration: none;
display: block;
}
 
div.fondo:hover {
opacity: .5;
-moz-opacity: .25;
filter:alpha(opacity=25);
width: 100%;
}
 

Código HTML:

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

Qué puedo hacer para el IE v.6 ??
Gracias