Rendere opache le immagini

Abbiamo gia visto in un altro articolo come creare un effetto opacita’ e trasparenza del intero blog ( Leggi qui ) Vediamo come creare un effetto opacita’ al passare del mouse o viceversa delle immagini contenute nel nostro blog ,cosa che va molto di moda ultimamente .Per vedere une demo clicca qui .

Il codice va inserito al interno del tag </head> (dietro)

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

Per l’effetto inverso ,cioe’ al passare del mouse l’immagine diventa opaca usa questo codice

con la stessa procedura :

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

Puoi anche utilizzare questo script per velocizzare il caricamento del tuo blog .Lo script in questione rende le immagini opache e’ consente una maggiore velocita’ di caricamento ( leggi qui )