Pubblicato il 15/07/12e aggiornato il

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://lh3.googleusercontent.com/-rx7jDMb3iew/T_FMqkSbVgI/AAAAAAAAY6Q/Ui7_4ZCtmqg/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://lh4.googleusercontent.com/-B60wExFPbN4/T_FMmeDFjVI/AAAAAAAAY6I/aV67JnqPLaQ/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://lh4.googleusercontent.com/-ZvVo39Ef9qw/T_FNvJzOGJI/AAAAAAAAY6k/VmWz3OWYS34/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.




4 commenti :

  1. anche questo è un bellissimo effetto,
    complimenti.

    RispondiElimina
  2. Buongiorno.
    Ho copiato le indicazioni date ma non riesco a gestirle nello spazio(pagina).
    Innanzitutto ho l'esigenza di metter molte più foto su una stessa pagina, in un ordine preciso (tipo: 4 alla prima riga, 3 alla seconda 5 alla terza).
    Poi avrei bisogno che gl'ingrandimenti, passandoci sopra col mouse, si ingrandissero tutti a centro pagina.
    Essendo uno smanettone neofita, ho provato di tutto ma non riesco a raggiungere il mio scopo.
    Potrei avere un piccolo aiutino?
    Grazie
    Miro

    RispondiElimina
    Risposte
    1. Per mettere in ordine le immagini magari usando una tabella leggi qui
      http://www.ideepercomputeredinternet.com/2012/08/galleria-immagini-blogger.html
      e eventualmente seguimi nei prossimi giorni. Se ho ben capito tu vorrresti un effetto tipo Lightbox. Con questo semplice codice e senza javascript non è possibile. Se non sei soddisfatto del Lightbox nativo di Blogger prova con PrettyPhoto che può essere usato anche con i video e altri oggetti HTML
      http://www.ideepercomputeredinternet.com/2014/07/prettyphoto-installazione.html
      @#

      Elimina
  3. Ti ringrazio per la risposta.
    Coi tuoi suggerimenti sono riuscito a scaricare direttamente Lightbox qui:
    http://lokeshdhakar.com/projects/lightbox2/
    e ho risolto il mio problema!
    Grazie
    Miro

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.