Effetto Zoom per testo e immagini con il CSS3

Come applicare l'effetto zoom a foto e immagini al passaggio del cursore con il CSS3 impostando la durata della trasformazione e l'intensità dello zoom

In questo sito ho già presentato diversi effetti da applicare, soprattutto alle immagini, quando ci si passa sopra con il cursore. Ricordo tra gli altri la Descrizione della foto che appare al passaggio del cursore, gli effetti hover per immagini ruotanti e 10 effetti speciali al passaggio del mouse. 

Queste trasformazioni vengono solitamente innescate quando si passa sopra all'oggetto HTML con il mouse. Questa tipologia di effetti viene chiamata Hover e viene attivata con il linguaggio CSS3 mediante delle trasformazioni. In sostanza viene indicato l'aspetto iniziale e quello finale dell'oggetto HTML al passaggio del cursore. Si imposta la durata della trasformazione, ovvero il tempo che deve intercorrere per passare dalla situazione iniziale a quella finale. Quando il cursore lascia l'oggetto HTML viene ripristinato l'aspetto iniziale.

Un'altra interessante applicazione del CSS3 è quella con cui ho realizzato i pulsanti animati di Demo e di Download. In questo breve post voglio mostrare come si possa realizzare un semplicissimo effetto di zoom al passaggio del mouse, da utilizzare non solo per le immagini, ma anche per il testo. Potrebbe essere applicato a un avviso particolarmente importante, a una foto, o anche a una piccola galleria di immagini, per evidenziare dei contenuti con un tocco di professionalità.

L'effetto utilizza solo il CSS3, e non il javascript, quindi non appesantisce minimamente la pagina, mantenendo la stessa velocità di caricamento. Chi non avesse nessuna conoscenza di questi linguaggi di markup, può scaricare gratuitamente il mio ebook "Guida all'HTML e al CSS" in cui trovare le nozioni propedeutiche.

Provate a passare con il cursore sopra alla immagine e al testo mostrati qui sotto

Effetto Zoom con CSS3

per verificare l'effetto di zoom su immagine e testo. Per l'immagine è stato usato questo codice

<style>
.zoom1 {
margin:50px;
transition: 1.2s ease;
}
.zoom1:hover{
transform : scale(1.3);
}
</style>
<img class="zoom1" style="display: block; margin-left: auto; margin-right: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-tW7Ypa5iXw6Znod1sPph4oFTbZBFlyuLK7UuS_U5yJNshJXcv5BDh6OtQgBJ4pLb79mkUcegY1IjZyCNtcaShmdBltFHRwCGZemU5A7cNZgoVfE8QzmDBwEJXnyk8WeTr8-GO1fzEfY/s200/spiaggia.jpg" />

Questo porta a un aumento del 30% delle dimensioni della foto, [scale(1.3)], con una durata della trasformazione di 1.2 secondi. Ovviamente l'URL della foto è il link diretto e può essere cambiato a piacere.

Per il testo è stato invece usato questo codice

<style>
.zoom2 {
text-align:center;
transition: 1.2s ease;
}
.zoom2:hover{
transform : scale(1.8);
}
</style>
<div class="zoom2"><font size="3" color="blue"><b>Effetto Zoom con CSS3</b></div>

con il testo che può essere personalizzato a piacere. La durata della trasformazione è stata impostata in 1.2 secondi mentre la dimensione del testo viene aumentata dell'80% mediante il tag scale(1.8);. Le dimensioni iniziali del testo (size="3") possono essere scelte tra 1 e 7 .

Gli utenti di Blogger possono inserire questi effetti nel Template, andando su Tema -> Modifica HTML. Dopo aver trovato la riga ]]></b:skin>, basterà incollarci subito sopra la parte evidenziata di giallo, per uno solo o per entrambi gli effetti. Quando si vogliono applicare gli effetti sarà sufficiente incollare nel post, in Modalità HTML, la parte di codice evidenziata di verde che serve per aggiungere rispettivamente le classi zoom1 e zoom2.