Effetto dissolvenza e opacità per immagini al passaggio del mouse.

Ho già dedicato un post alla opacità nelle immagini e di come variarla al passaggio del mouse. Con questo articolo voglio fare un ulteriore passo avanti e creare una transizione continua tra immagine chiara e opaca. Si usa lo script JQuery che è direttamente fornito da Google Code mediante le API. L'idea è quella di offrire le seguenti possibilità di intervento a chi abbia un blog su Blogger

1. Far diventare tutte le immagini opache in una misura determinata che si schiariscono al passaggio del mouse
2. Avere tutte le immagini senza opacità che però lo diventano quando ci passa sopra il mouse
3. Far diventare opache al passaggio del mouse solo delle immagini prestabilite
4. Far ritornare normali al passaggio del mouse delle immagini che originariamente siano opache.

E' chiaro che ci vogliono quattro codici diversi per le varie personalizzazioni. In tutti e quattro i casi occorre andare su Design > Modifica HTML e salvare il modello completo per un eventuale backup di ripristino. Cercare la riga </head> e, immediatamente sopra, incollare i seguenti codici.

 

EFFETTO SCHIARIMENTO IN TUTTE LE IMMAGINI DEL BLOG AL PASSAGGIO DEL MOUSE

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;img&#39;).fadeTo(&#39;slow&#39;, 0.6);
$(&#39;img&#39;).hover(function() {
$(this).fadeTo(&#39;slow&#39;, 1.0);
}, function() {
$(this).fadeTo(&#39;slow&#39;, 0.6);
});
});
</script>

EFFETTO OPACITA' IN TUTTE LE IMMAGINI DEL BLOG AL PASSAGGIO DEL MOUSE

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;img&#39;).fadeTo(&#39;slow&#39;, 1.0);
$(&#39;img&#39;).hover(function() {
$(this).fadeTo(&#39;slow&#39;, 0.6);
}, function() {
$(this).fadeTo(&#39;slow&#39;, 1.0);
});
});
</script>

EFFETTO SCHIARIMENTO SOLO IN ALCUNE IMMAGINI DEL BLOG AL PASSAGGIO DEL MOUSE

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;.LevaOpac&#39;).fadeTo(&#39;slow&#39;, 0.6);
$(&#39;.LevaOpac&#39;).hover(function() {
$(this).fadeTo(&#39;slow&#39;, 1.0);
}, function() {
$(this).fadeTo(&#39;slow&#39;, 0.6);
});
});
</script>

EFFETTO OPACITA' SOLO IN ALCUNE IMMAGINI DEL BLOG AL PASSAGGIO DEL MOUSE

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;.AggOpac&#39;).fadeTo(&#39;slow&#39;, 1.0);
$(&#39;.AggOpac&#39;).hover(function() {
$(this).fadeTo(&#39;slow&#39;, 0.6);
}, function() {
$(this).fadeTo(&#39;slow&#39;, 1.0);
});
});
</script>

 

Il valore 0.6 rappresenta la quantità di opacizzazione (0.1 è il massimo di opacità e 1.0 è assenza di opacità). Con i primi due codici l'effetto è automatico per tutte le immagini che si sono postate e per quelle che si pubblicheranno. Se invece si utilizzano gli ultimi due codici, per visualizzare l'effetto in una determinata immagine, dobbiamo inserirla in modalità HTML con questa struttura

<img class='LevaOpac' src='URL DELLA IMMAGINE' alt="Testo Alternativo" title="Nome Immagine"/>

<img class='AggOpac'  src='URL DELLA IMMAGINE' alt="Testo Alternativo" title="Nome Immagine"/>

dove il tag Title serve per visualizzarne il nome in stile tooltip e il tag Alt è importante ai fini SEO.Si deve in sostanza inserire la classe presente nello script.  Nel caso abbiate caricato le immagini con l'Editor di Blogger è sufficiente che andiate su Modifica HTML e incolliate una delle due espressioni

class='LevaOpac'  e class='AggOpac'

subito dopo il tag img. Ho postato una demo di questo effetto con quattro immagini. Quelle della prima fila sono opache e diventano chiare al passaggio del mouse mentre quelle della seconda fila hanno il comportamento contrario

• Demo dell'effetto opacità con dissolvenza -

Funziona con Chrome, Firefox, Safari, Opera e Internet Explorer 9.