Come ingrandire le immagini al passaggio del mouse con il CSS3.

Come ingrandire le immagini al passaggio del mouse con il CSS3 e senza javascript.

Fino alla comparsa del CSS3 per creare un effetto che ingrandisse le immagini al passaggio del mouse dovevamo installare delle librerie javascript. Ricordo di aver presentato a tale proposito l'Effetto Expando che avevo trovato su Dynamic Drive.

Sulla falsariga del metodo già proposto per ruotare le immagini vado a presentare un codice che serve per ridimensionarle al passaggio del mouse. Può essere utile per creare una galleria di miniature di foto che si mostrano a grandezza naturale quando vengono puntate con il mouse.

In ciascuna immagine può essere inserito un link all'articolo del blog da cui è stata estratta. Il codice della galleria si può incollare per esempio nell'HTML di una pagina statica. E' possibile allineare le immagini utilizzando Windows Live Writer per inserire una tabella di un determinato numero di celle.

Il codice di base per inserire immagini che si ingrandiscono al passaggio del mouse è il seguente:

<style>
.dimensione {
transition-duration: 1s;
-ms-transition-duration: 1s;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-property: transform;
-ms-transition-property: -ms-transform;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
overflow:hidden;
}
.dimensione:hover {
-ms-transform: scale(2,2);
-webkit-transform: scale(2,2);
-moz-transform: scale(2,2);
-o-transform: scale(2,2);
}
</style>
<a href="#"> <img class="dimensione" src="URL_IMMAGINE" width="200"/> </a>

dove la durata della transizione è di un secondo e l'accrescimento delle dimensioni delle immagini è del doppio sia sull'asse X sia sull'asse Y. Si possono inserire tutte le immagini che si vuole. L'importante è che venga incollata la stringa class="dimensione" subito dopo img. Per completezza ho messo anche i comandi per Internet Explorer vale a dire -ms-transition-duration, -ms-transition-property e -ms-transform: scale ma su IE tale effetto non vuole proprio funzionare. Le altre righe simili riguardano i browser Chrome e Safari (webkit), Firefox (moz) e Opera. Si otterrà una cosa simile a questa

Posto anche il codice che ho usato per questa tabella di una riga e tre colonne:

<style>
.dimensione {
transition-duration: 1s;
-ms-transition-duration: 1s;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-property: transform;
-ms-transition-property: -ms-transform;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
overflow:hidden;
}
.dimensione:hover {
-ms-transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);
-moz-transform: scale(1.5,1.5);
-o-transform: scale(1.5,1.5);
}
</style>
<table border="0" cellpadding="2" cellspacing="0" style="width: 700px;">
<tbody>
<tr>
<td valign="top" width="200"><img class="dimensione" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2wrVQ5nhoyxZmLx7FhmPLxVdyj4BOUVZJzyEkDMss8WeYV102DzLDh-niP-r7u2vUidNFb1NdzvK6Ph1liMXH04oZT4sj4g9-my83Aczagu3-P8GWtPcFNwwL3T2kT2N2EwU1xrOl/s300/albatro.jpg" style="display: block; float: none; margin-left: auto; margin-right: auto;" width="150" /></td>
<td valign="top" width="200"><img class="dimensione" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUAE6NnN50dKt8mRuQOHKSEywdn6aYo4A3AmeKn2E-n8o0xBT7_fPQnGq790r_uckJFcoUcRapV8V6H6UvWmPPrIzLHBa58fnW1LUI9svBLm4wffO0pX251oHE5Y32L9SVn3yp6fcF30NH/s300/medusa.jpg" style="display: block; float: none; margin-left: auto; margin-right: auto;" width="150" /></td>
<td valign="top" width="200"><img class="dimensione" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhusSgjaX5EJcVbokivGWX4KtSVaiyoLk6kRyOreE_lLq1PrLzBj0mXC2EhYVafRaQcuX48bTsjHHSxwnnCdnWiW8QzhKxAlYxp4o6Ppeva4CTkLE8nwZDJOD-js_qyzdJASJzSVECKilsP/s300/elefante.jpg" width="150" /></td></tr>
</tbody></table>

In questo caso l'accrescimento al passaggio del mouse è di un fattore di una volta e mezza (1.5), la larghezza delle immagini è di 150 pixel, quella delle celle di 200 pixel e non ho inserito link.