Effetto opacità o trasparenza al passaggio del mouse sopra le immagini.

Come creare un effetto hover di trasparenza o opacità al passaggio del cursore sopra una immagine.

Nei post precedenti abbiamo visto come creare un effetto hover per lo zoom e un effetto hover per passare dal bianco e nero ai colori e viceversa. Come preannunciato vado a illustrare un effetto hover anche per la trasparenza o opacità.

Ricordo che con l'utilizzo del javascript e di jQuery si possono rendere trasparenti o opache tutte le immagini di un sito. In questo post mi occuperò di mostrare solo gli effetti dovuti agli eventi mouseover e mouseout cioè a quegli eventi determinati dal cursore che passa sopra a una foto o dallo stesso che la lascia.

In sostanza si può mostrare una foto trasparente che diventa opaca al passaggio del mouse e una foto opaca che invece diventa trasparente. I maggiori browser sono in grado di leggere la trasparenza di un colore o di una foto. È stata introdotta anche la rappresentazione dei colori RGBA con cui inserire una trasparenza nel codice del colore tramite il canale Alpha.

Il livello di opacità o trasparenza è il quarto valore dopo i primi tre che indicano rispettivamente la quantità di Rosso, Verde e Blu. I valori dei colori possono variare da 0 a 255 mentre quello della opacità da 0.0 a 1.0. Mentre 0.0 è il massimo della trasparenza il valore 1.0 è il massimo della opacità.

Il codice da usare per l'opacità ha la seguente sintassi

color: rgba(0,0,255,0.0);
color: rgba(0,0,255,0.2);
color: rgba(0,0,255,0.4);
color: rgba(0,0,255,0.6);
color: rgba(0,0,255,0.8);
color: rgba(0,0,255,1.0);

che porta a questo risultato visibile con Chrome, Firefox, Safari e Opera

0.0

0.2

0.4

0.6

0.8

1.0

in cui si è scelto come esempio il colore blu.

RENDERE TRASPARENTE O OPACA UNA IMMAGINE CON IL CSS

Si può rendere trasparente o opaca una immagine con l'aggiunta di un semplice tag.

<img style="opacity:0.7;" src="URL_IMMAGINE"/>

L'aggiunta della stringa style="opacity:0.7;" aggiungerà una opacità del 70% o se si vuole una trasparenza del 30%. Ovviamente va aggiunto l'URL diretto della immagine da mostrare. Il risultato sarà il seguente:

Il nostro obiettivo però è passare da un livello di opacità a un altro quando si passa sopra all'immagine con il cursore.

EFFETTO HOVER PER LA TRASPARENZA

Per mostrare una foto opaca che poi diventa nitida al passaggio del cursore si usa questo codice

<img style="opacity:0.4;" onmouseover="this.style.opacity=1.0;" onmouseout="this.style.opacity=0.4;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr94D1FLpESIqzuWHLQ8oIF8hMb-wiaL5-y3vzUJRnSGgG5ZrjFIXjaY-9ZSHL19qvsU7Nar3HmrvvGP9n9sejtRb_aKlsInuBTyJMDFOud4OmjmOR-VAZXXQWYv2esyZZMjeBhuOOXa4/"/>

dove ho lasciato per chiarezza anche l'indirizzo della immagine utilizzata come test. Il risultato è il seguente:

L'immagine con una trasparenza del 40% diventa nitida cioè completamente opaca al 100% al passaggio del cursore per poi ritornare trasparente al 40% quando il mouse lascia la foto.

Si può creare anche l'effetto inverso con un codice simile

<img style="opacity:1.0;" onmouseover="this.style.opacity=0.5;" onmouseout="this.style.opacity=1.0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr94D1FLpESIqzuWHLQ8oIF8hMb-wiaL5-y3vzUJRnSGgG5ZrjFIXjaY-9ZSHL19qvsU7Nar3HmrvvGP9n9sejtRb_aKlsInuBTyJMDFOud4OmjmOR-VAZXXQWYv2esyZZMjeBhuOOXa4/"/>

con una immagine nitida che diventa semitrasparente al 50% al passaggio del cursore.

Non sarà quindi necessario rendere trasparente un foto con Photoshop o Gimp per pubblicarle nel web.