Effetti hover e transizioni per galleria con immagini circolari.

Piccola galleria di immagini circolari con effetto hover, trasparenza e transizioni.

Nella nuova versione CSS3 ci sono delle proprietà che permettono di creare delle animazioni di immagini senza bisogno di usare i sempre pesanti javascript. Inoltre adesso il CSS3 è supportato anche dalle nuove versioni di Internet Explorer e non più solo da Safari, Chrome, Firefox e Opera.

Con la proprietà border radius possiamo innanzitutto rendere circolare una immagine quadrata e applicare delle trasformazioni alle miniature circolari che si prestano molto di più delle rettangolari per ricevere gli effetti speciali. L'effetto particolare che vado a presentare l'ho preso da Codrops e, se susciterà l'interesse dei lettori, sarà seguito da altri che pubblicherò in altri post.

Ciascuna miniatura potrà essere collegata a un post e vi potremo inserire una descrizione per creare una galleria originale dei nostri articoli più interessanti

Il codice per realizzare una tale galleria può essere incollato su Layout > Aggiungi un gadget > HTML/Javascript oppure in una pagina statica con modalità HTML.

• Codice galleria di immagini con descrizione e link -

Oltre agli URL delle immagini che debbono essere caricate su Picasa si debbono modificare i link e le descrizioni. Gli altri parametri che riguardano dimensioni, colori di sfondo e margini è opportuno modificarli solo da chi abbia un minimo di conoscenze.  Si possono inserire anche più di tre immagini lasciando inalterata la struttura dei CSS e modificando solo l'ultima parte dell'HTML mantenendo la stessa struttura del codice. E' opportuno dare una occhiata anche al post sulla trasparenza (opacità)