Effetto zoom con descrizione per le immagini di Blogger.

Come mostrare immagini con effetto zoom e descrizione scorrevole mediante CSS3 con transizioni e trasparenza.

Riprendo a illustrare degli effetti particolari da applicare a tutte le immagini di Blogger oppure solo ad alcune che vogliamo mettere in particolare evidenza. L'effetto che vado a mostrare è una sintesi tra l'Effetto Zoom e quello dei widget che mostrano le descrizioni scorrevoli nelle immagini. 

Questo effetto può essere usato solo in un post o in una pagina statica oppure se ne può incollare il codice nel modello per poi poterlo utilizzare semplicemente richiamandone la regola. Al passaggio del cursore sulle foto ci sarà un doppio effetto Zoom con le immagini che si ingrandiscono leggermente e che mostrano ingrandita anche la loro parte centrale.

Le immagini devono essere inserite con un link che può essere anche quello della stessa immagine come accade quando si postano con l'Editor di Blogger. Il codice dell'effetto è il seguente:

.zoom-effect{display:inline-block;overflow:hidden;position:relative;text-decoration:none}
.zoom-effect:before{display:block;background-color:#000;content:"";height:100%;opacity:0;position:absolute;width:100%;font-family:Georgia; z-index:8;}
.zoom-effect:after{display:block;background-color:rgba(255,255,255,0.8);color:#000;content:attr(title);left:-100%;position:absolute;text-align:center;text-transform:uppercase;top:5%;width:94%;z-index:9;padding:2% 3%}
.zoom-effect img{border:none;display:block;z-index:7}
.zoom-effect:before,.zoom-effect:after,.zoom-effect img{-webkit-transition:all 200ms ease;-moz-transition:all 200ms ease;-o-transition:all 200ms ease;transition:all 200ms ease}
.zoom-effect:hover img{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2)}
.zoom-effect:hover:before{opacity:0.3}
.zoom-effect:hover:after{left:0}

Come detto può essere anche incollato nel modello con due diverse modalità. Coloro che hanno meno dimestichezza con i codici possono andare su Modello > Personalizza > Avanzato > Aggiungi CSS e incollarlo nel campo posto in alto a destra. Si posiziona il cursore dopo l'ultima parentesi graffa e si pigia su Invio. In alto a destra diventerà attivo il pulsante Applica al blog su cui dovremo cliccare.

Alternativamente si va su Modello > Modifica HTML e il codice si incolla subito sopra alla riga ]]></b:skin> quindi si salva il template.

Si possono ovviamente modificare i parametri precedenti a partire dal codice del colore della descrizione, dalla famiglia di caratteri (Georgia) della stessa fino allo zoom settato in 1.2 che comporta un aumento del 120% delle dimensioni in entrambe le direzioni.  Per fare in modo che una immagine abbia questo effetto dobbiamo semplicemente modificare il codice html del post

Se l'immagine è stata inserita mediante l'Editor di Blogger si va su HTML e si cerca il tag <a href="… . Tra a e href si incolla il nome della classe e il titolo della immagine in questo modo

<a class="zoom-effect" title="Descrizione della immagine" href="….

dove Descrizione della immagine sarà il testo che verrà visualizzato sulla foto al passaggio del cursore. Se invece volessimo inserire una immagine già caricata su Picasa o Google+ possiamo usare il suo link diretto. Il codice per avere una immagine con effetto zoom in questo caso sarà il seguente

<a class="zoom-effect" title="Descrizione della immagine" href="URL_LINK_ALLA_IMMAGINE"><img border="0" src="URL_DELLA_IMMAGINE" height="200" width="300" /></a>

Il link alla immagine può essere lo stesso hotlink della foto oppure anche un collegamento a un'altra pagina web che si aprirà quando venga cliccata.

USARE L'EFFETTO SENZA MODIFICARE IL TEMPLATE

Se volessimo visualizzare questo effetto in una sola foto situata in un post, in una pagina o anche in un widget HTML/Javascript il codice da incollare sarebbe il seguente

<style>
.zoom-effect{display:inline-block;overflow:hidden;position:relative;text-decoration:none}
.zoom-effect:before{display:block;background-color:#111;content:"";height:100%;opacity:0;position:absolute;width:100%;font-family:Georgia; z-index:8;}
.zoom-effect:after{display:block;background-color:rgba(255,255,255,0.8);color:#111;content:attr(title);left:-100%;position:absolute;text-align:center;text-transform:uppercase;top:5%;width:94%;z-index:9;padding:2% 3%}
.zoom-effect img{border:none;display:block;z-index:7}
.zoom-effect:before,.zoom-effect:after,.zoom-effect img{-webkit-transition:all 200ms ease;-moz-transition:all 200ms ease;-o-transition:all 200ms ease;transition:all 200ms ease}
.zoom-effect:hover img{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2)}
.zoom-effect:hover:before{opacity:0.3}
.zoom-effect:hover:after{left:0}
</style>
<a class="zoom-effect" title="Descrizione della immagine" href="URL_LINK_ALLA_IMMAGINE"><img border="0" src="URL_DELLA_IMMAGINE" height="200" width="300" /></a>

con le modalità di personalizzazione di cui abbiamo già parlato. Il codice precedente dovrà essere incollato ovviamente in Modalità HTML e la pagina dovrà essere pubblicata da lì senza andare su Scrivi. Concludo ricordando che si può modificare la durata della transizione di 200 millisecondi.