Visualizzare bordo su una immagine nello stato hover con i css

Nell' articolo che viene proposto oggi vedremo, invece, apparire un piccolo bordo attorno alla stessa immagine, quando passiamo con il mouse nello stato :hover. Potremmo inserire tale effetto per creare un semplice "vezzo" nella nostra pagina.
Per ottenere quanto ci siamo proposti, non serve altro che una immagine, .gif o .jpg che sia, e poco codice CSS. Di seguito vediamo come fare.

img{
 margin:0;
 padding:0;
 border:none;
 }  

Impostiamo per prima cosa margini, padding e bordi delle immagini a zero. Poi dobbiamo creare una classe, che per questo esempio, è stata nominata ".border". Il codice è:

a.border:link, a.border:visited{
 margin:0 auto;
 padding:4px;
 width:120px;
 height:120px;
 border: 1px solid #fff;
 display:block; 
 } 

Tale codice si riferisce all' immagine nello stato non ancora visitato (:link) e quando la stessa è stata visitata (:visited). Analizzando il codice abbiamo:

• margin:0 auto; "auto" in questo caso l' ho inserito per far apparire l' immagine al centro della pagina. Si potrebbe benissimo dichiarare il solo valore 0 (zero).
• padding:4px; è la distanza del bordo dall' immagine.
• width:120px; larghezza dell' immagine.
• height:120px; altezza dell' immagine.
• border: 1px solid #fff; anche se nn si vede nella pagina, c' è un bordo dello stesso colore di background; in questo caso l' ho impostato a bianco. Questo perchè, tra le varie prove fatte, ho notato uno "spostamento" verso il basso dell' immagine, quando si passa su di essa con il mouse.
• display: block; "estende" a tutta l' immagine l' area da linkare. Anche qui mi sono trovato dinanzi ad un inconveniente: la non visualizzazione dei bordi nella posizione top e bottom, sempre nello stato hover.

Adesso vediamo l' ultima parte di codice che prevede, appunto, la visualizzazione del bordo nello stato :hover.

a.border:hover { 
 margin:0 auto;
 padding:4px;
 border: 1px solid #aaa;
 height:120px;
 width:120px;
 }  

L' unica differenza che notiamo tra questo codice e quello scritto più su, la troviamo nella dichiarazione del colore del bordo che ho messo in grassetto. Chiaramente il colore possiamo modificarlo a nostro piacere. Alla fine di tutto ciò, vediamo il file di esempio.
Alla prossima.