questo rollover "particolare" é realizzabile con i CSS..??

[Andrea Cutelli]

..se date uno sguardo allo stupendo sito di Bruno Morandi
clicca
..capirete quello che sto per chiererVi.

passiamo al dubbio:
realizzare un effetto rollover solo con immagini, é cosa piuttosto semplice da fare, sia usando i tag html (td a, td a:hover, etc.)
oppure utilizzando dei <DIV> taggati con: a, a:link, a:hover, etc. contenenti le immagini in background.

ora la mia domanda é questa:
é possibile fare in modo che di default compaia la fotografia a colori senza testo mentre invece sull'onmouseover, la fotografia (appositamente scurita in background) con un semplice testo bianco sopra di essa..??
[ovviamente lasciando la foto cliccabile]

..in pratica, esattamente come nel sito del Morandi..


sto facendo delle prove, ma inutile aggiungere che non mi funziona.
una é questa ma funziona a metà

<div id="roll"><span class="text">blablabla</span></div>

impostando lo stile nel seguente modo:

<style>
div#roll a { background-image: url(on.jpg); height: 280px; width: 420px;}
div#roll a:hover { background-image: url(off.jpg);}
div#roll a:link .test { display: none;}
div#roll a:hover .test { font-family: "arial"; font-size: 16px; color: #fff;}
</style>


NB: nell'esempio, l'immagine on.jpg é la foto colorata mentre l'immagine off.jpg é la foto scurita


sapete aiutarmi..???
GRAZIE A TUTTI
Andrea

[Mich_]

<a> e` un oggetto di tipo inline, e non ha una forma precisa di default.

Per fare quello che chiedi devi prima trasformarlo in oggetto di tipo blocco, e dargli delle dimensioni:

#roll a { 
  display: block;
  height: 280px;
  width: 420px;
}
#roll a:link {
  background-image: url(on.jpg);
}
#roll a:hover {
  background-image: url(off.jpg);
}
#roll a:link span {
  display: none;
}
#roll a:hover span {
  font-family: arial, sans-serif;
  font-size: 16px;
  color: #fff;
}