Galleria di immagini con zoom e filtro opacità.

Come installare una galleria di immagini in una pagina statica o in un widget di Blogger.

Vado a presentare una piccola galleria di immagini ciascuna delle quali può essere collegata a un articolo del blog. Si tratta di sei foto inserite in una tabella di due righe e tre colonne. Oltre a scegliere i link dei post e le foto da visualizzare si possono configurare anche le dimensioni in modo da mostrare questo widget per esempio in homepage con i post più importanti del sito oppure in una pagina statica. Nel primo caso si deve installare in un widget HTML/Javascript mentre nel secondo si può incollare il codice in Modalità HTML. Si può inserirlo direttamente anche nel template andando su Modello > Modifica HTML > Procedi e scegliendo la posizione ottimale che può essere subito sotto l'intestazione o nel footer.

Quando si passa con il mouse su una miniatura viene generato un effetto opacità e verranno mostrati contestualmente Titolo del Post, Descrizione dell'articolo e il link Leggi Tutto per aprirlo

Il codice per l'installazione della galleria è il seguente

<div align='center'>
<div id='sfondo'>
<table>
<tr><td>
<div class='view view-first'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhJjhuztEAKtSlPhViX8qGPt36_mF8BnZjTWs7OGzJtlVc9E02Xgt-eKNv7mEPyI8dEhPjFItAAahInHnZtVhUwLkQKRvAcCyOMEMGSF2ZlORKM8A8TjDdl8mSyaNZvgONNkvdTEUqn0Hk/s1600/albero.jpg'/>
<div class='mask'>
<h2>Markerly</h2>
<p>Markerly per condividere foto</p>
<a class='info' href='http://design-prova.blogspot.it/2012/11/dimostrazione-del-servizio-markerly-per.html' target="_blank"/>Leggi tutto</a>
</div>
</div>  </td>
<td> <div class='view view-first'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf9H4bJDnQ7CtQDx0-tKLaFP4Zi18r-A8Pl_nDiLvMmqhKmAiidkbG4eGuTs3LKyT9KDujEtrvk9xP_3K9iJp1Sbm-XnJkebCabhKoWK4opDQ1pTpuRQiMoIvq_3StiyNHfoB0nW66XO-H/s1600/cavalli.jpg'/>
<div class='mask'>
<h2>Post popolari ruotanti </h2>
<p>Miniature ruotanti per il widget dei Post più popolari</p>
<a class='info' href='http://design-prova.blogspot.it/2012/11/demo-del-widget-dei-post-piu-popolari.html' target="_blank"/>Leggi tutto</a>
</div>
</div> 
</td> <td>
<div class='view view-first'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisNsNSsC235vGovAOEEPMBR_UeCnyxv7Q_RpekwTkpCYX_8FeruOTjaxSjbrCqvNAh-OJxX_tl_dexNUFp-0RgQoeMosFnbbVbMhR0LrlA23BH8Qr4NXqaStyInZp_E4k1EaxX2q0a0FBc/s600/natura6.jpg'/>
<div class='mask'>
<h2>Menù Multicolore</h2>
<p>Menù multicolore a più livelli per blog su Blogger </p>
<a class='info' href='http://design-prova.blogspot.it/2012/09/post-di-demo-del-menu-multicolore-piu.html' target="_blank"/>Leggi tutto</a>
</div>
</div> 
</td>
</tr>
<tr>
<td>
<div class='view view-first'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxL4kRMKZ-ERcezjgVUO_daIykdHrwhA-QL8343W5-y3D5iyM88a8FqJac6XG-YchJTcjnL6yxv6bkVMalxZjHdlJ59EM_mhrDbyhXwQ0GeJhc54CHHP7vJioO8gJzUsYH9uSELT6IB-I/s320/cigno.jpg'/>
<div class='mask'>
<h2>Miniature Etichetta  </h2>
<p>Widget delle miniature degli ultimi post relalivi a una categoria</p>
<a class='info' href='http://design-prova.blogspot.it/2012/09/demo-del-widget-delle-miniature-degli.html' target="_blank"/>Leggi tutto</a>
</div>
</div>
</td>
<td>
<div class='view view-first'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_ARS8cVD5wBuYwGdcllFmbKW0IziVsTO2pQGevjjiGATJJ_PloDayzc7PubPv3s43CTTgkNxpLyPA4uAxAGBPrHp1rQNeRtmujlDdFZSHJ0Fkxu5Y1vD8XzYdxkhiwI8HE9y9hvwleo4/s320/felino.jpg'/>
<div class='mask'>
<h2>Bottone per Pinterest  </h2>
<p>Installare un pulsante per condividere le immagini su Pinterest</p>
<a class='info' href='http://design-prova.blogspot.it/2012/02/demo-inserimento-bottone-di.html' target="_blank"/>Leggi tutto</a>
</div></div>
</td>
<td>
<div class='view view-first'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2fPx7NPr-GQR_q0FipMakzMpWojPsJuU-OAnpmFOPsWNtUqD5Ua3FhaPfInx7B6LK7iRX64in5m8uVbmBTkAhMvlrawYz_yybU4WcJglCoCsaIBSGX8lqeI8FDtNHgfqplswpFKt8vRo/s320/bovino.jpg'/>
<div class='mask'>
<h2>Scroll per widget  </h2>
<p>Come inserire un cursore laterale in un widget</p>
<a class='info' href='http://design-prova.blogspot.it/2012/02/demo-inserimento-widget-con-scroll.html' target="_blank"/>Leggi tutto</a>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
<style>
 #sfondo {
background: #FAF8CC; width:100%; border: 2px solid #b7ae78;
}
.view-first img {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first .mask {
-ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;
filter: alpha(opacity=0);
opacity: 0;
background-color: rgba(186,108,7, 0.7);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.view-first h2 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
-ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;
filter: alpha(opacity=0);
opacity: 0;
-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-first p {
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first:hover img {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
}
.view-first a.info {
-ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;
filter: alpha(opacity=0);
opacity: 0;
-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-first:hover .mask {
-ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=100)&quot;;
filter: alpha(opacity=100);
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
-ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=100)&quot;;
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.view-first:hover p {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.view-first:hover a.info {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.view {
width: 260px;
height: 170px;
margin: 10px;
border: 2px solid #000000;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(#) no-repeat center center;
}
.view .mask,.view .content {
width: 260px;
height: 170px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 8px 0 0 0;
}
.view p {
font-family: Georgia, serif;
 font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 5px 40px ;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
</style>

Come detto questo codice può essere incollato su Layout > Aggiungi un gadget > HTML/Javascript oppure in una pagina statica  in Modalità HTML . Le personalizzazioni più importanti riguardano

1. L'inserimento degli URL delle immagini al posto di quelli usate come test colorati di rosso
2. L'inserimento degli URL dei post collegati al posto dei collegamenti di test colorati di rosso
3. Il titolo del post all'interno del tag <h2>
4. La descrizione del post dentro il tag <p>
5. L'inserimento opzionale del tag target="_blank" per aprire l'articolo in un'altra scheda
6. La personalizzazione della espressione Leggi tutto
7. Il colore e il bordo dello sfondo contenitore (leggi lo stile dei bordi) nel CSS #sfondo
8. Le dimensioni delle immagini 260x170 quelle di default 
9. Dimensioni e famiglie di caratteri oltre a colori di testo e di sfondo
10. Il grado di opacità dello sfondo della immagine e di quello del testo rispettivamente di 0.7 e 0.8

Fonte | BloggingeHow -