trasparenza css

[orphengt]

Salve,
vorrei creare un effetto hover su immagine che mi permetta di ridurre la trasparenza al passaggio del mouse. Questa immagine è però contenuta in un altra div che imposta una trasparenza pari del 60%.

In pratica:
il mio codice html è:

<div class="rettangolo">
<div class="immagine">
<a>[img]a.png[/img]</a>
</div>
<div>

e il css:

.rettangolo {
background: #000;
filter:alpha(opacity=70);
-moz-opacity:.7;
opacity:.7;
}

.immagine a:hover img{
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

come faccio a slegare il l'opacità dell'immagine da quella della div "rettangolo"???

[Prill]

Se ne è parlato spesso sul forum. Opacity è proprietà ereditata, dunque se impostata sul div applicata a tutti i suoi contenuti.

Per ovviare puoi far ricorso a una png con trasparenza oppure a un colore di sfondo del div espresso in valori rgba, nel tuo caso rgba(0,0,0,0.7)
Explorer, dalla versione 8 in giù, non riconosce tali valori ma analogo effetto può essere ottenuto attraverso il filter gradient. Puoi ricavare tu direttamente il codice per IE dal generatore che trovi qui

avendo poi magari cura di inserire il css solo per Explorer attraverso i commenti condizionali

Non ho però la certezza che in Explorer il filtro gradient del div non crei conflitti con quello alpha dei suoi contenuti, in tal caso la soluzione più semplice sarebbe la png di sfondo per il div.