Pubblicato il 13/10/15e aggiornato il

8 semplici effetti hover per le immagini.

Codici HTML e CSS per 8 semplici effetti hover che mutano l'aspetto delle immagini al passaggio del cursore: zoom+, zoom-, spostamento a sinistra, spostamento in alto, effetto tilt, rotazione, effetto focus e scala di grigi.
Il cursore è un elemento essenziale per un computer e insieme alla tastiera è lo strumento a disposizione dell'utente per interagire con la pagina web che sta guardando. Una variazione dello stato del cursore si definisce evento e può modificare l'aspetto della pagina.

Passando con il mouse sopra a un link vi sarete accorti che in molte pagine web se ne modifica il colore. Il CSS che sovrintende a questo evento è determinato dalla pseudo-classe a:hover. Quando invece si passa il cursore su una immagine in linea generale si visualizza solo un tooltip con il testo che è stato inserito all'interno del tag title.

Si possono anche creare degli effetti per modificare l'aspetto di una o più immagini quando ci si passi sopra con il mouse. A tale proposito ricordo l'effetto hover per le quattro direzioni e una galleria di foto con effetto hover. In questo articolo vedremo alcuni esempi di effetti hover per le immagini piuttosto semplici che possono essere applicati singolarmente a una immagine oppure anche essere inseriti nel modello per poi essere richiamati dal nome della classe nei vari post. Per non dover trovare delle immagini di prova utilizzerò il servizio Lorem Pixel per immagini casuali

1) EFFETTO ZOOM +


Il codice da incollare nel post in Modalità HTML è il seguente

<style>
.hover1 img {
height: 300px;
width: 300px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.hover1 img:hover {
width: 400px;
height: 400px;
}
</style>
<div class="hover1"><img src="http://lorempixel.com/400/400"/></div>

con le immagini che aumenteranno di dimensioni da 300 a 400 pixel al passaggio del mouse.




 

2) EFFETTO ZOOM -


Il codice da incollare in Modalità HTML in questo caso è

<style>
.hover2 img {
height: 300px;
width: 300px;
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
.hover2 img:hover {
  width: 250px;
  height: 250px;
}
</style>
<div class="hover2"><img src="http://lorempixel.com/300/300"/></div>

Passando con il mouse sulla immagine questa si rimpicciolirà.


3) EFFETTO SPOSTAMENTO A SINISTRA


Il codice da incollare in Modalità HTML è il seguente

<style>
.hover3 img {
  margin-left: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}
.hover3 img:hover {
margin-left: -200px;
}
</style>
<div class="hover3"><img src="http://lorempixel.com/280/280"/></div>

che porterà a uno spostamento di 200 pixel sulla sinistra.

4) EFFETTO TILT


Il codice da incollare in Modalità HTML è il seguente

<style>
.hover4 img {
-webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
.hover4 img:hover {
webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}
</style>
<div class="hover4"><img src="http://lorempixel.com/285/285"/></div>

che porterà a una rotazione di 10 gradi in senso antiorario quando si passa sopra con il mouse.

5) EFFETTO SPOSTAMENTO IN ALTO


Il codice da incollare in Modalità HTML è il seguente

<style>
.hover5 img {
margin-top: 10px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}
.hover5 img:hover {
margin-top: -100px;
}
</style>
<div class="hover5"><img src="http://lorempixel.com/260/260"/></div>

con l'immagine che si alzerà di 100 pixel al passaggio del mouse.

6) EFFETTO ROTAZIONE


Il codice da incollare in Modalità HTML è il seguente

<style>
.hover6 img {
-webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
.hover6 img:hover {
border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}
</style>
<div class="hover6"><img src="http://lorempixel.com/265/265"/></div>

e porterà a una rotazione di 360 gradi con l'immagine che diventa rotonda.




 

7) EFFETTO FOCUS


Il codice da incollare in Modalità HTML è il seguente

<style>
.hover7 img {
-webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
.hover7 img:hover {
border: 20px solid #000;
  border-radius: 50%;
}
</style>
<div class="hover7"><img src="http://lorempixel.com/255/255"/></div>

che fa diventare l'immagine rotonda e inserisce un bordo nero di 20 pixel




 

8) EFFETTO SCALA DI GRIGI


Il codice da incollare in Modalità HTML è il seguente

<style>
.hover8 img {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter: gray;-webkit-filter: grayscale(100%);
}
.hover8 img:hover {
filter: none;
-webkit-filter: grayscale(0%);
}
</style>
<div class="hover8"><img src="http://lorempixel.com/310/310"/></div>

Con questo codice l'immagine sarà inizialmente visualizzata in scala di grigi ma, passandoci sopra con il mouse, si mostrerà nei colori originali.



 

COME INCOLLARE IL CODICE NEL MODELLO


Con i codici proposti si potrà inserire una singola immagine in un post con l'effetto hover preferito. Se si desidera utilizzare un dato effetto più volte allora è opportuno inserire il codice nel template di Blogger. Facciamo l'esempio di questo ultimo codice con classe hover8 . Si va su Modello > Modifica HTML e nella sezione <b:skin> si cerca la riga ]]></b:skin> e, subito sopra, si incolla

.hover8 img {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter: gray;-webkit-filter: grayscale(100%);
}
.hover8 img:hover {
filter: none;
-webkit-filter: grayscale(0%);
}

quindi si salva il template. Tutte le volte che volessimo pubblicare una immagine che abbia questo effetto la dovremo caricare su Picasa per ottenere il suo link diretto quindi incollare nel post in Modalità HTML solo una riga di codice come questa 

<div class="hover8"><img src="URL_IMMAGINE"/></div>

Una procedura analoga si opererà per gli altri effetti. Ricordo infine che le righe di codice transition: all 0.5s ease; servono per determinare la durata della transizione, in questo caso di 0,5 secondi.




3 commenti :

  1. Ciao Ernesto, ho provato ad inserire il primo effetto in una singola immagine (caricata su Public di dropbox) ma quando salvo, blogger mi dice che il "div" non può essere lasciato aperto. Ho provato a chiuderlo col tag di chiusura e il salvataggio va a buon fine, ma l'immagine non viene visualizzata: si vede un riquadro bianco vuoto con la tipica icona dell'immagine mancante. Quale potrebbe essere il problema? Grazie mille!

    RispondiElimina
    Risposte
    1. Hai ragione! Mi sono dimenticato i div di chiusura, non so come sia potuto succedere. Ho subito corretto. Non capisco perché usi Dropbox per questo effetto. Basta incollare il codice in un post o nel modello. Incollandolo su
      http://htmledit.squarefree.com/
      funziona perfettamente come puoi vedere qui sotto
      http://i.imgur.com/CK4BWef.png
      @#

      Elimina
    2. Grazie: provo appena possibile!

      Elimina

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.