Galleria di miniature con link che si ingrandiscono al passaggio del mouse.

Come realizzare una semplice galleria di immagini solo con il CSS per poi pubblicarla in una pagina statica e che mostra le foto ingrandite e con la descrizione al passaggio del cursore

Le Gallerie di Foto sono una delle personalizzazioni più usate in tutti i siti dilettantistici o professionali che siano. Ho già presentato diversi slideshow automatici e manuali per mostrare una raccolta di immagini che però abbisognano quasi sempre di librerie esterne di javascript che rallentano il caricamento delle pagine. In questo articolo voglio illustrare una metodologia molto semplice per creare una galleria di miniature che al passaggio del cursore si ingrandiscono e mostrano la foto più grande con la descrizione della stessa. 

Opzionalmente si può aggiungere a ciascuna miniatura anche un collegamento in modo che chi ci clicca sopra possa aprire una data pagina del blog oppure anche esterna ad esso. L'effetto si ricava solo con il CSS e può essere inserito nel modello oppure semplicemente nella pagina in cui visualizzare la galleria di foto.

Le immagini possono essere configurate con la stessa dimensione ed è stato impostato un colore di sfondo giallo chiaro (lightyellow) con il bordo grigio (gray) tratteggiato (dashed) e con la descrizione di colore nero (black). Al posto del nome dei colori in inglese si possono usare i codici dei colori per rendere l'aspetto della galleria più adatto al nostro sito. Ricordo che se si usano i codici dei colori dobbiamo anteporre a ciascuno di essi il cancelletto (Es: #000 per black) che invece non deve essere messo per i nomi dei colori. Se vogliamo realizzare la galleria in una sola pagina statica eventualmente depurata di sidebar e footer basta andare su Pagine > Nuova pagina e in HTML incollare questo codice 

<style type='text/css'>
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 9999;
}
.thumbnail span{ /* CSS per le immagini allargate */
position: absolute;
background-color: lightyellow; /* Colore dello sfondo */
padding: 5px;
left: -1000px;
border: 1px dashed gray; /* Colore e stile del bordo */
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS per le immagini allargate */
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS per le immagini allargate al passaggio del mouse*/
visibility: visible;
top: 0;
left: 60px; /*posizione orizzontale per inizio immagine allargata */
}
</style>
<a class="thumbnail" href="#thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhJjhuztEAKtSlPhViX8qGPt36_mF8BnZjTWs7OGzJtlVc9E02Xgt-eKNv7mEPyI8dEhPjFItAAahInHnZtVhUwLkQKRvAcCyOMEMGSF2ZlORKM8A8TjDdl8mSyaNZvgONNkvdTEUqn0Hk/s300/albero.jpg" width="100px" height="66px" border="0" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhJjhuztEAKtSlPhViX8qGPt36_mF8BnZjTWs7OGzJtlVc9E02Xgt-eKNv7mEPyI8dEhPjFItAAahInHnZtVhUwLkQKRvAcCyOMEMGSF2ZlORKM8A8TjDdl8mSyaNZvgONNkvdTEUqn0Hk/s300/albero.jpg" width="300"/><br />Albero con nuvola.</span></a>
<a class="thumbnail" href="#thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2LXfq00t0np-ug3clc6rbdSN-avW89JQEpxdnpxDdxIopbRcsjH4o3OqJYB8cHnTrL6eH4obXyE9PkrZJhLRZWc-wxFy79EsNpZvYtjlas3U4ZoVHVwLkbeaqgTMiXC4GhID2Zu3tGW_V/s300/alci.jpg" width="100px" height="66px" border="0" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2LXfq00t0np-ug3clc6rbdSN-avW89JQEpxdnpxDdxIopbRcsjH4o3OqJYB8cHnTrL6eH4obXyE9PkrZJhLRZWc-wxFy79EsNpZvYtjlas3U4ZoVHVwLkbeaqgTMiXC4GhID2Zu3tGW_V/s300/alci.jpg" width="300"/><br />Erbivori della savana.</span></a>
<a class="thumbnail" href="#thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDNJU88zYoDYM4obXsVCKH2mz2-p8d8KcaDzKbUVAJCyULOyXsVTTuvbg0tdR1P1Qk5dpwOUQye-dYENe-Uv9ia2QkwyC6-CITIrhaRpsDJBJUI0_W4YCULjl0oBIKhpY5aNxCmLvulxMD/s300/bruco.jpg" width="100px" height="66px" border="0" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDNJU88zYoDYM4obXsVCKH2mz2-p8d8KcaDzKbUVAJCyULOyXsVTTuvbg0tdR1P1Qk5dpwOUQye-dYENe-Uv9ia2QkwyC6-CITIrhaRpsDJBJUI0_W4YCULjl0oBIKhpY5aNxCmLvulxMD/s300/bruco.jpg" width="300"/><br />Bruco che mangia foglia.</span></a>
<a class="thumbnail" href="#thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf9H4bJDnQ7CtQDx0-tKLaFP4Zi18r-A8Pl_nDiLvMmqhKmAiidkbG4eGuTs3LKyT9KDujEtrvk9xP_3K9iJp1Sbm-XnJkebCabhKoWK4opDQ1pTpuRQiMoIvq_3StiyNHfoB0nW66XO-H/s300/cavalli.jpg" width="100px" height="66px" border="0" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf9H4bJDnQ7CtQDx0-tKLaFP4Zi18r-A8Pl_nDiLvMmqhKmAiidkbG4eGuTs3LKyT9KDujEtrvk9xP_3K9iJp1Sbm-XnJkebCabhKoWK4opDQ1pTpuRQiMoIvq_3StiyNHfoB0nW66XO-H/s300/cavalli.jpg" width="300"/><br />Lotta tra stalloni.</span></a>
<br/>
<a class="thumbnail" href="#thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-9aOkhNV6lOAI9eBxgvpJvuwzkgNTjYnczHEQ7hLrySwARJ84NJUB1wMidyPm0uslpsr7npZ9WMwgcL3ztffX9W1kcRxNiik2zH3N7WZLd4kv_JSOaghi5LxiUqZCLZS5PL55yN2M-qM/w590-h335-no/monte-neve.jpg" width="100px" height="66px" border="0" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-9aOkhNV6lOAI9eBxgvpJvuwzkgNTjYnczHEQ7hLrySwARJ84NJUB1wMidyPm0uslpsr7npZ9WMwgcL3ztffX9W1kcRxNiik2zH3N7WZLd4kv_JSOaghi5LxiUqZCLZS5PL55yN2M-qM/w590-h335-no/monte-neve.jpg" width="300"/><br />Monte innevato.</span></a>
<a class="thumbnail" href="#thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhowWYDNcd2Cd7iAKYMUTCjz38XJA4IwQQMfjdGVv2vLcXJURNVqsB6H2HYl2jukA9WIldqYaVZsw5CSIirkBJLOWcx6Cgpo4P7mpKmrpMDHVL4e-A50SiqEu13RN6Hs4nefx_mMuWtyMw/w590-h335-no/inverno.jpg" width="100px" height="66px" border="0" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhowWYDNcd2Cd7iAKYMUTCjz38XJA4IwQQMfjdGVv2vLcXJURNVqsB6H2HYl2jukA9WIldqYaVZsw5CSIirkBJLOWcx6Cgpo4P7mpKmrpMDHVL4e-A50SiqEu13RN6Hs4nefx_mMuWtyMw/w590-h335-no/inverno.jpg" width="300"/><br />Paesaggio invernale.</span></a>
<a class="thumbnail" href="#thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuePU3WNc4CFpDwzOvvephEziDU6lOQfDrLdt_e2RkK5MwA-q7LhyFAQAbyF7vBYQMCFFg2Y-3omxTbU5xjTr6_RyJpgDYxmmRnQDQmP6CMWqMEDXwiNBJlBgzeChLTtoNgKb6T0qGF_P0/w590-h335-no/tramonto.jpg" width="100px" height="66px" border="0" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuePU3WNc4CFpDwzOvvephEziDU6lOQfDrLdt_e2RkK5MwA-q7LhyFAQAbyF7vBYQMCFFg2Y-3omxTbU5xjTr6_RyJpgDYxmmRnQDQmP6CMWqMEDXwiNBJlBgzeChLTtoNgKb6T0qGF_P0/w590-h335-no/tramonto.jpg" width="300"/><br />Tramonto sul mare.</span></a>
<a class="thumbnail" href="#thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrf11T65z2qI9zVjJFNnUvSAn_BdbhtrBwW7HOix4MTuWsBdrDxcQJwKemmfFqICyWR5eHhNf8XJk3WCRonPW9wLa1YcSLEnXusBA6diuN7ProCLvxrSUl0yZQd8a6t339lPU9y1Ggb30/w590-h335-no/villaggio.jpg" width="100px" height="66px" border="0" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrf11T65z2qI9zVjJFNnUvSAn_BdbhtrBwW7HOix4MTuWsBdrDxcQJwKemmfFqICyWR5eHhNf8XJk3WCRonPW9wLa1YcSLEnXusBA6diuN7ProCLvxrSUl0yZQd8a6t339lPU9y1Ggb30/w590-h335-no/villaggio.jpg" width="300"/><br />Villaggio su fiume.</span></a>

Ovviamente poi si pubblica la Pagina. Si può anche usare un semplice post oppure anche un widget HTML/Javascript. Nel codice di demo ho usato 8 immagini divise in due righe da 4 dal tag <br/> che è un salto di riga.  Ciascun URL è stato incollato due volte, una per la miniatura e l'altra per l'immagine grande. Le dimensioni proposte sono 100x66 pixel per quello che riguarda le miniature e 300 pixel di larghezza per le immagini al passaggio del mouse. Tali valori possono essere modificati.

Come vedete in ciascun blocco di codice è stata inserita la classe thumbnail e la descrizione della foto colorata di blu. Se si vuole collegare una pagina web a ciascuna immagine dobbiamo modificare i blocchi di codice in questo modo 

<a class="thumbnail" href="http//www.ideepercomputeredinternet.com#thumb">

in cui ho inserito l'URL di questo blog. Nel caso si voglia aprire la pagina in un'altra scheda si può inserire il tag target="_blank" in questo modo

<a class="thumbnail" href="URL_LINK#thumb" target="_blank">

COMPLEMENTI

Se invece di miniature si volessero visualizzare solo dei link che poi mostrano le immagini al passaggio del cursore, ogni blocco di codice diventerebbe 

<a class="thumbnail" href="URL_LINK#thumb" >Testo visualizzato nel link<span><img src="URL_IMMAGINE" /><br />Descrizione della immagine</span></a>

Volendo si possono mostrare anche tutte le immagini del sito con questo meccanismo. Dovremo però incollare il codice che va da <style… > a </style> nel template subito sopra a </head> e pubblicare le immagini con la classe thumbnail o incollarla nelle foto già postate. L'identificatore di frammento #thumb l'ho inserito perché è presente nel tutorial di Dynamic Drive da cui ho ricavato il post ma in verità può anche essere tralasciato senza problemi.