Sergio Pinna

Web Designer

effetto-zoom

Effetto zoom sulle immagini (e non solo)

Effetto zoom sulle immagini è possibile grazie a poco codice CSS3. Il risultato grafico è interessante e carino.

Questo è l’ennesima dimostrazione che grazie al CSS3 è possibile creare effetti grafici “dinamici” con un codice non complesso ma semplice. Se pensi che attualmente i browser più utilizzati hanno (Firefox, Google Chrome, IE10, Opera, ecc.ecc.), percentualmente parlando cifre assai basse (siamo sull’ordine del 50%-60%) è facile immaginare che cosa si potrebbe fare con il solo CSS3 (e non il futuro CSS4, se mai ci sarà) nei nostri siti web.

Altri effetti “dinamici” similari li tratterò in futuro, per adesso accontentati di questo ;-P Gli effetti “dinamici” danno vita al tuo sito internet e lo rendono al pari dei temi di ultima generazione. Inoltre vi è da valutare il non sottovalutato impatto experience, cosa che mediante questi escamotage rendono il sito accattivante e, come una calamita, capta l’occhio dell’utente. Davvero utile nel caso delle call-to-action: così facendo rendi l’attenzione dell’utente catturata in un ben determinato e voluto punto della pagina così l’occhio tende a leggere e a fissarsi sul punto in movimento. Per questo l’effetto zoom sulle immagini è usabile anche su di un div e sul suo contenuto. Un esempio che puoi notare è nella home page di questo sito.

In definitiva: l’effetto zoom delle immagini è un effetto non solo accattivante a livello grafico, ma utile per la user experience che desideri attuare sul tuo sito internet.

Questo è il codice HTML: notare come il tag img è racchiuso in un tag a che, grazie al CSS seguente, sarà un elemento block e non inline (display: block).

<a href="/link-immagine.php" title="Link dell'immagine">
	<img src="img/immagine.jpg" alt="Nome dell'immagine" title="Nome dell'immagine">
</a>

E questo è il codice CSS

a {
	overflow: hidden;
	display: block;
	width: 500px; /* da specificare */
	height: 400px; /* da specificare */
}
a img {
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
a:hover img	{
 -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

Eccone un esempio:


Effetto zoom sulle immagini

Condividi questo articolo