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.