Effetto Zoom al passaggio del cursore per testo e immagini.

Come implementare l'effetto Zoom per le immagini e per il testo utilizzando il linguaggio CSS3.

In questo blog ho già presentato diversi effetti basati sul CSS3 e effetti più complessi basati invece su librerie javascript. Alcuni effetti che prima avevano bisogno di un appropriato javascript ora possono essere realizzati semplicemente mediante l'utilizzo del nuovo, ma ormai neppure tanto, linguaggio CSS3.

In questo breve post voglio mostrare come si possa realizzare un semplicissimo effetto di zoom al passaggio del mouse da utilizzare per immagini o anche per del testo. Potrebbe essere applicato a un avviso particolarmente importante oppure a una immagine o anche a una piccola galleria di immagini per dare un tocco di professionalità. 

Ricordo che una galleria di immagini semplicissima può essere creata usando il codice di una tabella dove in ciascuna cella viene inserita una immagine o una miniatura. Per rendere la cosa più semplice può essere usato un Editor WYSIWYG come Windows Live Writer. Se passate con il cursore sopra alla immagine o al testo qui sotto potete testare questo effetto

Effetto Zoom con CSS3

Per ottenere questo risultato per l'immagine va incollato questo codice

<style>
.zoom1 {
margin:50px;
transition: 1.2s ease;
-moz-transition: 1.2s ease; /* Firefox */
-webkit-transition: 1.2s ease; /* Chrome - Safari */
-o-transition: 1.2s ease; /* Opera */
-ms-transform : 1.2s ease; /* IE */
}
.zoom1:hover{
transform : scale(1.3);
-moz-transform : scale(1.3); /* Firefox */
-webkit-transform : scale(1.3); /* Chrome - Safari */
-o-transform : scale(1.3); /* Opera */
-ms-transform : scale(1.3); /* IE */
}
</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" />

mentre per il testo il codice da usare è il seguente

<style>
.zoom2 {text-align:center;transition: 1.2s ease;
-moz-transition: 1.2s ease; /* Firefox */
-webkit-transition: 1.2s ease; /* Chrome - Safari */
-o-transition: 1.2s ease; /* Opera */
-ms-transform : 1.2s ease; /* IE */
} 
.zoom2:hover{
transform : scale(1.8);
-moz-transform : scale(1.8); /* Firefox */
-webkit-transform : scale(1.8); /* Chrome - Safari */
-o-transform : scale(1.8); /* Opera */
-ms-transform : scale(1.8); /* IE */
}
</style>
<div class="zoom2"><font size="3" color="#00f"><b>Effetto Zoom con CSS3</b></font></div>

Tali codici vanno incollati in un post o in una pagina statica dopo essere passati da Scrivi a HTML. La pubblicazione dell'articolo va fatta senza tornare a Scrivi. L'URL e il testo colorati di blu possono naturalmente essere sostituiti da l'indirizzo della nostra immagine e da un testo a piacere. In entrambi gli zoom ho proposta una durata della trasformazione di 1.2 secondi vale a dire che per passare alla dimensione maggiore si impiega questo tempo. Lo zoom della immagine è settato a 1.3 cioè le dimensioni aumentano del 30% mentre lo zoom del testo è settato a 1.8 che comporta un aumento del 80% delle dimensioni del testo. Il testo può essere colorato a piacere con i codici dei colori e con dimensioni (size="3") iniziali scelte tra 1 e 7 .

Le due righe colorate di viola in entrambi gli effetti servono per centrare testo e immagine. Volendo si possono incollare i codici rispettivamente evidenziati di giallo e evidenziati di verde nel modello subito sopra alla riga ]]></b:skin> per poi incollare nei post solo la parte evidenziata di marrone con le classi zoom1 e zoom2 per l'effetto di immagini o testo.