Immaginiamo di dover pubblicare sul web delle fotografie, e il link di richiamo è posizionato all’interno di un DIV; la cosa più semplice sarebbe quella di far diventare un’immagine un collegamento ipertesto verso le nostre fotografie.

Ma se volessimo aggiungere del testo e far in modo che tutto il box in cui è posizionato cambi colore di bordo al passaggio del mouse?

Per iniziare dobbiamo creare nel CSS un DIV class con le caratteristiche di un contenitore, questo infatti avrà il compito di contenere la nostra immagine e anche il nostro testo di riferimento. La scelta di utilizzare una class è legata alla possibilità di poter aggiungere lo stesso “effetto” anche ad altri elementi del layout.

Importante è anche decidere a priori le dimensioni delle immagini che andremo ad utilizzare, anche se, con questa tecnica, l’intelaiatura risultante è liquida e quindi adattabile ad ogni circostanza.

.fotoBoxContent {
  width: 440px;
  float: left;
}
.fotoBox img {
  float: left;
  margin-right: 1em;
  width: 64px;
  height: 64px;
  border: none;
}

Il codice qui sopra riportato è estremamente semplice; nel DIV class .fotoBoxContent è definita la grandezza espressa in pixel del box e l’allineamento a sinistra. Va da sé che le dimensioni del box sono totalmente personalizzabili.

L’altro DIV class è impostato sul controllo delle immagini, con le dimensioni che vogliamo utilizzare, l’allineamento a sinistra e un margine destro di 1em. Inoltre ho aggiunto l’opzione di non far visualizzare il bordo dell’immagine.

A questo punto lavoriamo su cuore vero e proprio del nostro effetto.

.fotoBox, a.fotoBox {
  clear: left;
  float: left;
  border: 4px solid #f1f1f1;
  background: #fff;
  padding: 3px;
  margin: 0 0 1px;
  text-decoration: none;
  color: #000;
}
a.fotoBox:hover {border: 4px solid #7abbeb;}

Qui il controllo è estremamente semplice, in quanto si tratta principalmente di un mutamento del colore del bordo al passaggio del mouse. Ho deciso di utilizzare un clear:left; per effettuare una pulizia a sinistra, e poi ho mantenuto invariata la caratteristica di allineamento, sempre a sinistra, dell’immagine e del testo. Per quanto riguarda il testo (link) contenuto all’interno del box ho pensato di mantenere invariate il colore e il comportamento di decorazione, impedendo che venga visualizzato come un classico link.

Considerando che l’effetto è basato sul bordo, ho mantenuto invariate le dimensioni, ma ho fatto in modo di cambiare il colore; questo grazie alla class a.fotoBox:hover .

L’ultimo passaggio consiste nel richiamare correttamente le proprietà CSS all’interno del documento HTML

<div class="fotoBoxContent">
 <a class="fotoBox" href="#">
 <img src="css.gif" alt="CSS" />
 Lorem ipsum etc … </a>
</div>

Qui puoi vedere un esempio finale del box.

E’ interessante notare come praticamente il testo contenuto all’interno del box sia un appendice del link, ma grazie al controllo sul testo, impostato nel DIV class .fotoBox, rimane inalterato e racchiuso nell’effetto.

Questa soluzione permette di aggirare un problema di visualizzazione presente su Internet Explorer; infatti, quest’ultimo, non supportando a pieno gli elementi :hover, non riesce ad interpretare correttamente il codice espresso in un’altra forma, compatibile invece con browser basati su Gecko.