Pubblicato il 15/11/11e aggiornato il

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

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

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

effetto-hover-mouse

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

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.





4 commenti :

  1. semplicemente fantastico :)
    Grazie, lo provo subito

    RispondiElimina
  2. Favoloso. Continua a piacermi.
    L'ho usato a lungo, costruendo una tabella con 12 riquadri corrispondenti alle categorie del blog.
    L'ho rimesso oggi, usandolo in maniera diversa, ma sempre nel footer.
    Quello che non mi spiego è però questo. Come mai non riesco più a centrare i riquadri, che mi restano spostati sulla dx del footer?
    Che mi sono persa, Ernesto? Un aiutino?

    RispondiElimina
    Risposte
    1. Non te lo so proprio dire, come faccio :)
      La demo funziona ..
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.