Come opacizzare una immagine e illuminarla al passaggio del mouse.

Effetto trasparenza in una immagine

Il concetto di opacità di una immagine è ben conosciuto da chi è esperto di programmi di grafica. Si possono prendere a prestito alcuni concetti per rendere più interessanti le immagini del nostro blog.

Ho postato usato un codice per una opacità al 70%. Se si vuole variare la percentuale basta sostituire a 70 e 0.7 con altri numeri. Ricordo che la percentuale è inversamente proporzionale alla opacità. In altri termini una opacità al 30% significa che l'immagine è meno visibile che con una opacità al 60%. Ecco alcuni esempi



<img style="-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);filter:alpha(opacity=70);-moz-opacity:0.7;opacity: 0.7;-khtml-opacity: 0.7;" src="URL-IMMAGINE"/>

Passate sopra con il mouse per visualizzare il grado di opacità di ciascuna foto. Se si vuole opacizzare una immagine dopo averla inserita sull'editor di Blogger o su un post creato con Windows Live Writer, occorre inserire i parametri necessari andando in modalità HTML. Bisognerà cioè creare un apposito stile

style="-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);filter:alpha(opacity=80);-moz-opacity:0.8;opacity: 0.8;-khtml-opacity: 0.8;"

e incollarlo dopo il tag <img . In WLW si può inserire solo il codice

style="filter: alpha(opacity=40); -moz-opacity: 0.4; opacity: 0.4; -khtml-opacity: 0.4"

come mostrato nello screenshot cliccabile

Naturalmente vanno inseriti i giusti parametri al posto di quelli evidenziati di rosso.
E' possibile mostrare una diversa opacità di una foto al passaggio del mouse generando un effetto suggestivo. Provate con la foto qui sotto

Il codice da usare in questo caso è il seguente

<img style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1.0;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" src="URL DELLA IMMAGINE"/>

che comporta una visibilità completa (100 o 1.0) quando il mouse è sopra all'immagine (onmouseover) e una opacità al 30% quando non c'è (onmouseout). Per l'effetto opposto, cioè visibilità totale senza mouse e opacità con il mouse, occorre invece questo codice

<img style="opacity:1.0;filter:alpha(opacity=100)" onmouseover="this.style.opacity=0.3;this.filters.alpha.opacity=30" onmouseout="this.style.opacity=1.0;this.filters.alpha.opacity=100" src="URL DELL'IMMAGINE"/>

Dopo i codici dei colori in RGB che determinano i valori di rosso (red), verde (green) e blu (blue) è venuto anche lo standard RGBA dove A sta per Alpha. Anche con il colore RGB c'era comunque l'attributo opacity che poteva servire a questo scopo. Al posto di fogli di stile di questo tipo

body {background : rgb(18,32,64); }

si può adesso utilizzare una sintassi che determina anche la opacità del colore

body {background : rgba(18,32,64,.4); }
dove l'ultimo numero ne fissa l'opacità. Non sarà quindi più necessario scolorire una foto con un programma di grafica.