Galleria di immagini con Effetto Hover.

Quando il mouse passa sopra a un oggetto in genere viene a mutare la forma del cursore, vediamo come si possa creare un effetto che attraverso il nuovo linguaggio CSS3 che permette di creare delle transizioni fantastiche senza appesantire la pagina con file javascript. Codrops ha creato tutta una serie di effetti basandosi esclusivamente sui fogli di stile. In totale sono ben dieci effetti di cui potete vedere le rispettive demo selezionando il numero dell'esempio nel menù posto in alto. Dopo che si è scelto il tipo di effetto da applicare al blog si aggiungono delle classi specifiche con la sintassi specificata.

Le classi sono state denominate view view-first, view view-second, view view-third, view view-fourth, ecc per rendere più semplice l'installazione dell'effetto. Ho applicato l'Effetto numero tre a un post di prova inserendo come l'autore una tabella con quattro immagini

• Demo dell'Effetto Hover per quattro foto - 

Per la sua installazione si va su Modello quindi su Backup/Ripristino per un backup di sicurezza del modello. Poi andiamo sempre su Modello > Modifica HTML > Procedi e si cerca la riga </head> dove, subito sopra, si incolla il seguente codice

• Codice dell'Effetto Hover -

Si possono modificare i colori e le dimensioni delle immagine ricordandosi che l'altezza e la larghezza delle foto devono essere le stesse di quelle del box contenitore. Si salva il modello. Per inserire nel blog una immagine con questo effetto, si può scegliere di posizionarla in un widget, in un post o in una pagina statica. Per il widget si dovrà andare su Layout > Aggiungi un gadget > HTML/Javascript e incollare un codice con questa struttura

<div class="view view-third">
<img src="URL Immagine" />
<div class="mask">
<h2>Titolo</h2>
<p>Descrizione immagine</p>
<a class="info" href="URL del Collegamento">Leggi tutto</a>
</div>
</div>

dove dovranno essere inseriti l'indirizzo dell'immagine e quello del link che a vi abbiamo collegato. Può essere un modo per dare a un articolo una evidenza particolare. Se si decide di inserire l'immagine in un post allora dobbiamo incollare il codice precedente in Modalità HTML. Al posto di Titolo, Descrizione immagine e Leggi tutto possiamo mettere anche altre espressioni. Quando si passerà sopra all'immagine con il mouse si vedranno titolo, descrizione e Read More con un particolare effetto trasparenza e transizione

Se si vogliono presentare tutta una serie di immagine con link agli articoli e con questo effetto in un widget o in una pagina statica dobbiamo creare una tabella magari con l'ausilio di Windows Live Writer. Le immagini possono essere postate su Picasa, DropBox o SugarSync. A titolo di esempio vi posto il codice della demo

• Codice di una tabella di quattro immagini con Effetto Hover -

Si tratta di una tabella di due righe per due colonne ma può anche essere creata più grande magari diminuendo le dimensioni delle immagini. L'effetto è correttamente visibile con Firefox, Chrome, Safari e con Internet Explorer 10. Con le versioni precedenti di IE non si vedranno le transizioni.