In passato abbiamo più volte illustrato le straordinarie potenzialità dei fogli di stile CSS per gestire una pagina HTML. In questa guida vedremo come utilizzare alcune regole CSS per creare un effetto semi-trasparente alle immagini e farle ritornare opache al passaggio del mouse.
La proprietà Opacity nei CSS
La trasparenza parziale di quasi tutti gli elementi di HTML può essere gestita attraverso la proprietà Opacity che definisce il grado di opacità di quell’elemento. Opacity può assumere valori compresi tra 0 (elemento completamente trasparente) ed 1 (elemento completamente opaco, è il valore di default). Nel nostro caso assegneremo la proprietà Opacity al tag <img> di HTML che introduce una immagine. Per ottenere una trasparenza del 40% (0,4) assegneremo a Opacity il valore complementare 0,6. In codice CSS avremo quindi:
img {
opacity: 0.6;
}
Immagini opache al passaggio del mouse
Fin qui il risultato che otterremmo è piuttosto statico con le immagini che saranno semplicemente semi-trasparenti (o semi-opache a seconda dei punti di vista). Possiamo però sfruttare la proprietà Opacity per creare un effetto più interessante, ovvero far tornare le immagini perfettamente opache al passaggio del mouse su di esse.
Per ottenere questo risultato definiremo una nuova regola CSS che abbina il tag <img> con il selettore hover ed ovviamente con la proprietà Opacity impostata ad 1. In questo modo la regola sarà applicata solo quando il mouse passa sopra l’immagine. Il codice che ci permette di ottenere questo risultato è anch’esso molto semplice:
img:hover {
opacity: 1.0;
}
Il risultato di questo codice CSS è mostrato nell’immagine: a sinistra la foto è semi-trasaprente a destra al passaggio del mouse torna opaca. Ricordiamo infine che la proprietà Opacity non è supportata da alcuni vecchi browser.