Zoom e Descrizione per le foto con un effetto Hover

Come applicare un effetto alle foto per ingrandirle e mostrarne una descrizione al passaggio del cursore con una trasformazione personalizzabile nei colori e nei font

Si parla di Effetto Hover quando in una pagina web il navigatore, passando con il mouse sopra a un oggetto HTML, ne modifica l'aspetto. L'Effetto Hover più semplice, ed applicato in modo nativo da tutti i browser, è quello dei link che cambiano colore quando ci si passa sopra con il cursore.

Se si passa con il mouse sopra a una immagine, viene di default mostrato un tooltip con il testo che è stato inserito nell'attributo title associato alla stessa immagine. In precedenti post ho mostrato 10 esempi di effetti hover per le immagini, illustrando più in dettaglio alcuni effetti zoom, che possono essere collegati all'evento del passaggio del cursore sopra a una foto. 

In questo post mi occuperò solo di un effetto da applicare alle immagini. La foto si ingrandirà al passaggio del cursore, acquisterà un diverso colore di sfondo e verrà mostrata una descrizione sovraimpressa (overlay). Potranno essere personalizzati tutti i parametri del colore del testo e dello sfondo, della famiglia di font, delle dimensioni delle foto e potrà essere inserito anche un collegamento a un'altra pagina web per incentivarne i click.

Questo effetto può essere usato solo in una pagina oppure se ne può incollare il codice nel Tema, per poi poterlo utilizzare richiamandone la regola. Al passaggio del cursore sulle foto, ci sarà un triplo effetto; 1) Zoom con le immagini che si ingrandiscono leggermente nella loro parte centrale, 2) mostrano un diverso colore di sfondo con la 3) comparsa di una descrizione. Quest'ultimo effetto potrà essere più o meno rapido mediante il settaggio della durata della trasformazione con il CSS3. Ecco come muta la foto se puntata dal cursore.

L'effetto è particolarmente interessante se si usa una immagine con sfondo. Non occorre che sia in formato PNG, funziona anche con una immagine JPG come quella usata nel test presente a fondo pagina.

CODICE DELL'EFFETTO HOVER CON ZOOM E DESCRIZIONE

Si apre l'Editor del post quindi  si va in modalità HTML e si incolla un codice come questo:

<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:#036; font-weight:bold; 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{ transition:all 200ms ease; }
.zoom-effect:hover img{transform:scale(1.2);}
.zoom-effect:hover:before{opacity:0.3}
.zoom-effect:hover:after{left:0}
</style>
<div align="center">
<a class="zoom-effect" title="Blogger Girl con Laptop" href="https://www.ideepercomputeredinternet.com" target="_blank"><img border="0" src="https://lh4.ggpht.com/-Qoo9HZx7P0U/VPrbLozvX7I/AAAAAAAArTw/zUA6Ee2QCZ8/blogging-girl%25255B3%25255D.jpg" height="300" width="450" /></a></div>

Nel codice ho lasciato l'URL della immagine e ho messo come collegamento quello della Homepage di questo sito per rendere le cose più chiare. Il codice può essere incollato anche in un widget HTML / Javascript di Blogger o un widget Testo di Wordpress.  Ecco la Demo da testare passandoci sopra con il mouse.

Gli utenti di Blogger possono inserire questo codice nel loro Tema, per poi richiamare l'effetto nelle immagini pubblicate. Nel caso dovranno selezionare e copiare il codice che si trova tra i due tag <style> e </style> evidenziati di giallo e incollarlo subito sopra alla riga ]]></b:skin> in Tema -> Modifica HTML per poi salvare il Tema.

Le immagini a cui applicare l'effetto dovranno essere pubblicate nei post con un codice come questo

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

Il codice potrà essere personalizzato a piacere. Ecco alcuni dei principali parametri su cui intervenire:

1. background-color:#111; è il colore di sfondo finale
2. font-family:Georgia; è la famiglia dei caratteri
3. background-color:rgba(255,255,255,0.8); è il colore di sfondo iniziale con trasparenza
4. color:#036; è il colore del testo della descrizione
5. text-transform:uppercase; per trasformare il testo in tutte maiuscole
6. top:5%; width:94%; sono posizione e larghezza della descrizione in percentuale
7. padding:2% 3%; è la distanza dai bordi del testo, rispettivamente in verticale e orizzontale
8. transform:scale(1.2); per impostare uno zoom del 120%
9. <div align="center"> per centrare la  foto nel layout
10. height="300" width="450" sono le dimensioni della foto
11. transition:all 200ms ease; per impostare la durata della trasformazione (0,2 secondi).