Realizzare una photo-gallery con avvalendosi dei soli CSS non è complesso, inoltre esiste un gran numero di esempi e tutorial on-line dedicati all’argomento.
Basta fare una semplice ricerca su google e subito si presentano numerose possibilità, ad esempio il sito CSS play riporta vari esempi di photo-gallery basate esclusivamente sui CSS e di seguito riporto alcuni esempi:
- Simplest photograph gallery
- A simple CSS photo-album
- Photo scroll gallery
- A sliding list click gallery
Tra questi, il primo, il più semplice ha subito catturato la mia attenzione ed ho deciso di riproporlo in un sito che ho realizzato lo scorso anno.
Di seguito riporto la descrizione del codice HTML e del CSS associato.
Innanzi tutto è necessario inserire all’interno di un <div>, identificato univocamente “gallery”, una lista non ordinata con la quale definiremo le immagini:
<div id="gallery">
<ul>
<li><a href="#nogo"><img src="immagine_1" title="" alt="Descrizione" /></a></li>
<li><a href="#nogo"><img src="immagine_2" title="" alt="Descrizione" /></a></li>
<li>....</li>
<li><a href="#nogo"><img src="immagine_3" title="" alt="Descrizione" /></a></li>
</ul>
</div>
successivamente definiremo il foglio di stile:
#gallery {width:750px;}
#gallery ul {list-style:none; padding:0; margin:0; width:180px; position:relative; float:right;}
#gallery ul li {display:inline; width:52px; height:52px; float:left; margin:0 0 5px 5px;}
#gallery ul li a {display:block; width:50px; height:50px; text-decoration:none; border:1px solid #000;}
#gallery ul li a img {display:block; width:50px; height:50px; border:0;}
#gallery ul li a:hover {white-space:normal; border-color:#ddd;}
#gallery ul li a:hover img {position:absolute; right:185px; top:0; width:auto; height:auto; border:1px solid #000;}
Spero risulti utile.
Articoli correlati
Tags: CSS, photo-gallery