Oggi voglio segnalarvi un’ottima galleria informativa creata dall’amico Addy con jQuery e CSS da utilizzare liberamente per i nostri progetti web.

La galleria permette di inserire delle immagini con dimensioni standard e poi sull’evento onmouse over vengono ridimensionate grazie a jQuery scoprendo un titolo e una descrizione.

Questa tipologia di galleria può essere implementata per la visualizzazione in stile gallery dei propri lavori.

Andiamo a vedere insieme il codice principale HTML.

Nella nostra pagina HTML dovremo inserire un codice simile a questo

<div class="galleryContainer">
<div class="galleryImage">
<img src="images/image01.jpg">
<div class="info">
<h2>Taylor Swift</h2>
Taylor Alison Swift (born December 13, 1989)
is an American country pop singer-songwriter
and actress.
</div>
</div>

Come vediamo dal semplice codice HTML vi è un contenitore globale per ogni immagine chiamato galleryContainer il quale contiene in un altro contenitore galleryImage l’immagine.

Infine troviamo il contenutore info in cui viene inserito titolo e descrizione che in un secondo momento verranno resi visibile grazie a jQuery.

Avendo uno stile CSS associato potremo configurare il design di questa galleria al 100%, sia nella colorazione che nel layout.

Vi consiglio di seguire Addy e i suoi interessanti articoli ricchi d’esperienza e spunti interessanti per noi web designer.

Letture Consigliate per CSS

Articoli simili

Autore:

Giuliano Ambrosio è un Web Designer Freelance di Torino che ama la grafica e sperimentare tecniche di creatività sul web. Grazie all'esperienza maturata nel campo del web design potrai scoprire i servizi disponibili, oppure guardare i suoi ultimi lavori.