Galleria di Immagini con effetto Hover ottenuto con CSS3.

Come installare una Galleria di foto con collegamenti ai singoli post e con effetto hover al passaggio del cursore che mostri titolo, descrizione e Read More.

Le Gallerie di immagini sono un aspetto importante per molti siti che hanno nelle foto il loro punto di forza. In genere tali gallerie nei blog su piattaforma Blogger sono mostrate nelle pagine statiche e ciascuna immagine ha solitamente un link verso un post collegato.

Per sorprendere in qualche modo il lettore e per rendere la galleria più attraente vengono inseriti degli effetti che si manifestano di solito al passaggio del cursore o dopo un click. Quando ci sono i link è chiaro che l'effetto non può essere subordinato a un click visto che questo deve portare alla visualizzazione della pagina collegata. In questo articolo vediamo come realizzare una semplice galleria di immagini con un effetto hover di grande impatto e che credo vada bene per tutti i layout anche perché sarà possibile modificare le dimensioni delle immagini. Ecco quello che sarà l'aspetto di una galleria con quattro foto

Il codice che propongo ha sei immagini e per ciascuna di queste ci sarà un Titolo e una Descrizione oltre al link Leggi Tutto per aprire il post collegato. Tale codice funzionerà in qualsiasi pagina web e quindi non soltanto nei blog su piattaforma Blogger. Se avete un sito su questa piattaforma andate su Bacheca > Pagine > Nuova pagina e digitate il Titolo e  la prima parte della pagina

Andate quindi su HTML e incollate questo codice che poi vedremo come personalizzare

<style>
.view {
    background-color:#FFFFFF;  /* colore di sfondo */
    border: 10px solid #FFFFFF;  /* stile del bordo */
    box-shadow: 2px 3px 5px #696969; /* ombreggiatura del bordo */
    cursor: default;
    float: left;
    height: 200px; /* altezza della immagine */
   margin: 10px;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 250px; /* larghezza della immagine */
}
.view .mask, .view .content {
    height: 200px; /* altezza del box */
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 250px; /* larghezza del box */
}
.view img {
    display: block;
    position: relative;
}
.view h2 {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
    color: #FFFFFF !important;
    font-size: 17px;
    margin: 20px 0 0;
    padding: 10px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}
.view p {
    color: #FFFFFF !important;
    font-family: Georgia,serif; /* Famiglia di font */
    font-size: 12px; /* dimensione caratteri */
    font-style: italic; /* Corsivo */
    padding: 10px 20px 20px;
    position: relative;
    text-align: center;
}
.view a.info {
    display: inline-block;
    padding: 7px 14px;
    text-decoration: none;
    text-transform: uppercase;
}
.view-third img {
   box-shadow: 0 0 1px #000000;
-webkit-transition: all 0.2s ease-in;
   -moz-transition: all 0.2s ease-in;
   -o-transition: all 0.2s ease-in;
   -ms-transition: all 0.2s ease-in;
   transition: all 0.2s ease-in;
}
.view-third .mask {
  color:#FFF !important;
   background-color: rgba(0,0,0,0.6);
   -ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: translate(460px, -100px) rotate(180deg);
   -moz-transform: translate(460px, -100px) rotate(180deg);
   -o-transform: translate(460px, -100px) rotate(180deg);
   -ms-transform: translate(460px, -100px) rotate(180deg);
   transform: translate(460px, -100px) rotate(180deg);
   -webkit-transition: all 0.2s 0.4s ease-in-out;
   -moz-transition: all 0.2s 0.4s ease-in-out;
   -o-transition: all 0.2s 0.4s ease-in-out;
   -ms-transition: all 0.2s 0.4s ease-in-out;
   transition: all 0.2s 0.4s ease-in-out;
}
.view-third h2 {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-third p {
  color:#FFF !important;
   -webkit-transform: translateX(300px) rotate(90deg);
   -moz-transform: translateX(300px) rotate(90deg);
   -o-transform: translateX(300px) rotate(90deg);
   -ms-transform: translateX(300px) rotate(90deg);
   transform: translateX(300px) rotate(90deg);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-third a.info {
color:#FFF !important;
-webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-third:hover .mask {
  -ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=100)&quot;;
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
   -webkit-transform: translate(0px, 0px);
   -moz-transform: translate(0px, 0px);
   -o-transform: translate(0px, 0px);
   -ms-transform: translate(0px, 0px);
   transform: translate(0px, 0px);
}
.view-third:hover h2 {
background: none repeat scroll 0 0 #9C1813; /* Colore del Titolo */
  border-top: 1px solid #000; /* Colore del bordo superiore del titolo */
  border-bottom: 1px solid #000;  /* Colore del bordo inferiore del titolo */
  text-shadow: 0px 1px 1px #111; /* Ombra del titolo */
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.5s;
   -moz-transition-delay: 0.5s;
   -o-transition-delay: 0.5s;
   -ms-transition-delay: 0.5s;
   transition-delay: 0.5s;
}
.view-third:hover p {
  color:#FFF !important;
   -webkit-transform: translateX(0px) rotate(0deg);
   -moz-transform: translateX(0px) rotate(0deg);
   -o-transform: translateX(0px) rotate(0deg);
   -ms-transform: translateX(0px) rotate(0deg);
   transform: translateX(0px) rotate(0deg);
   -webkit-transition-delay: 0.4s;
   -moz-transition-delay: 0.4s;
   -o-transition-delay: 0.4s;
   -ms-transition-delay: 0.4s;
   transition-delay: 0.4s;
}
.view-third:hover a.info {
background: none repeat scroll 0 0 #9C1813; /* Colore di sfondo del link */
border: 1px solid #000;  /* Colore del bordo del Read More */  
    color:#FFFFFF; /* Colore del link Read More */
    text-shadow: 0px 1px 1px #111; /* Ombra del link Read More */
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.3s;
   -moz-transition-delay: 0.3s;
   -o-transition-delay: 0.3s;
   -ms-transition-delay: 0.3s;
   transition-delay: 0.3s;
}
</style>
<div align="center">
<table border="0" cellpadding="2" cellspacing="4" style="width: 510px;"><tbody>
<tr>       <td valign="top" width="260"><div class="view view-third">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja4JDtX9y4kWl5EaIGUpYKiqZBzR8iPQIu5HyjoYhXNAnM60FN23j5so9zPRbi-2hMP5HKx2igxO1Bc9JINDXy-rGH9AtGZkGu6aqVAjLMvgBp5sRzdosCahAcOb0zIDG-Zcgvw7O_Is2E/s250/mongolfiere.jpg" />
<div class="mask">
<h2>
MONGOLFIERE</h2>
Raduno di mongolfiere
<a class="info" href="http://goo.gl/mYEisH">Leggi tutto</a></div>
</div>
</td>       <td valign="top" width="260"><div class="view view-third">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj95AIv3rhwTbQBUkFLUwwJwn9KnUlAbxFQ2le7w01FazMMIKlzJRuWMU3oSIisPgdhl54hlPRcZiqI_yWuWShYSc9m9vD8FdnTSAuz34LxDd7mV5eUUNSb6MJcz1H8WceqAa8RV8dvX0i2/s250/montagne.jpg" />
<div class="mask">
<h2>
MONTAGNE</h2>
Scorcio montano
<a class="info" href="http://goo.gl/mYEisH">Leggi tutto</a></div>
</div>
</td>     </tr>
<tr>       <td valign="top" width="260"><div class="view view-third">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis4G9R9d3Naddk_2QuT84_2OC_46ZLcfR_aIqg3s388KdrIpyGmfn0GNybTSdmGKd7lpkywg4EjmmxNCvtr9vxGSxyhgeAq86lDzljD6na12D0R-eUYEAP12ssvTtzpJf37Q_YR5LhPq2W/s250/nubi.jpg" />
<div class="mask">
<h2>
Cielo plumbeo</h2>
Cielo nuvoloso con raggi di sole
<a class="info" href="http://goo.gl/mYEisH">Leggi tutto</a></div>
</div>
</td>       <td valign="top" width="260"><div class="view view-third">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLLkVl7yK4L5VRNcWd6D0Y0Di7Z5FI6t8t_PATaehnot5H7Y0DVI00Sus6qZiq1OB57AfFTorNX99Li7F8Hv4_nR569F0LAevVA8pYZDMagl0Yd64sMyu4bGqRV4PRXT2gU50gu3PT09vn/s250/pianta.jpg" />
<div class="mask">
<h2>
PIANTA TROPICALE</h2>
Pianta dalla forma suggestiva
<a class="info" href="http://goo.gl/mYEisH">Leggi tutto</a></div>
</div>
</td>     </tr>
<tr>       <td valign="top" width="260"><div class="view view-third">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEquKud5epM-TxnFOMX__ZOA_mMQKsOssUY-vZhxLuKphDLaUIwgQBkLo_NfHSDue_fwCe72rZLFWJOSNTvSW3B7mwpciSc9FDikZlOczIrSWkWJu2EDm8vVyfdW7VG421LwfPXBK0xFZy/s250/cavalli.jpg" />
<div class="mask">
<h2>
CAVALLI NEL DESERTO</h2>
Cavalli e cavalieri berberi
<a class="info" href="http://goo.gl/mYEisH">Leggi tutto</a></div>
</div>
</td>       <td valign="top" width="260"><div class="view view-third">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZvEQYu1gAdtRxnpXCokjydgxPjEC6ACFZJMoqHq0PHDQu2DqYTn6IZK7Wpnmd13IvZpwUIxQgUYSFwOi4YAi9qukwacfgw95fqLSV0MJQysCbeIaq9BPTxNKz2yAV_LVhXdrasrUvb_Z6/s250/pesce.jpg" />
<div class="mask">
<h2>
PESCATORI E PESCE</h2>
Pesce di fiume esce dall'acqua
<a class="info" href="http://goo.gl/mYEisH">Leggi tutto</a></div>
</div>
</td>     </tr>
</tbody></table>
</div>

Si pubblica la pagina da HTML senza tornare su Scrivi dopo essere andati su Opzioni > Interruzioni di riga > Premi Invio per interruzioni di riga. I più bravi tra di voi potranno inserire i CSS direttamente nel modello nella sezione <b:skin> senza i tag <style> e </style> e pubblicare nella pagina statica solo la seconda parte del codice.

Demo
Clicca qui

Personalizzazioni più importanti:

1. È stata usata una tabella di tre righe per due colonne. Si può modificare questa struttura ricordandoci che una riga inizia con il tag <tr> e termina con </tr> mentre una singola cella inizia con il tag <td> e termina con il tag </td>.
2. La larghezza totale è stata impostata su 510 pixel e ciascuna immagine ha dimensioni 250x200 pixel mentre i parametri cellpadding="2" cellspacing="4" indicano la distanza tra le celle e tra contenuti e bordi delle celle.
3. I codici dei colori, la dimensione dei caratteri e la famiglia dei font possono essere modificati a piacere così come la trasparenza. In caso di dubbi consultare il post su RGB to HEX
4. Le trasformazioni hanno una durata impostata con i parametri del tipo all 0.2s 0.4s ease-in-out; e i decimi di secondo sono tali da mostrare i vari elementi in successione
5. Insieme all'URL di ciascuna immagine che dovrà essere caricata su Picasa, si dovrà indicare Titolo, Descrizione, Read More e inserire il link al posto di  http://goo.gl/mYEisH.
6. La Galleria viene inserita centralmente mediante il tag evidenziato di giallo.
7. Si possono aggiungere altre immagini secondo la seguente 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>

In conclusione si tratta di una Galleria di semplice realizzazione e di grande effetto.