simple rollover via css

[corte]

ciao

vorrei sapere se è possibile creare un "simple rollover" via css :master: ...mi spiego meglio:
io ho dei thumbnails uno affianco all'altro e vorrei che al passaggio del mouse si applicasse sopra al thumbnail un' immagine semitrasparente;una spece di effetto sprite solo che ho le due immagini su due file separati.vorrei farlo via css in modo che l'effetto si applichi all'intero contenuto del div...altrimenti provero con il simple rollover che ho trovato nel forum

qui è dove vorrei applicarlo Sito

[Mich_]

Ecco alcuni link, che completano quello che gia` hai:
Fast Rollovers Without Preload
Menu grafici con rollover e preload via CSS

Comunque nella tua pagina ci sono alcune cose ceh andrebbero modificate:
1. elimina gli spazi nei nomi dei file: alcuni sistemi li gestiscono male
2. le varie immagini fanno parte di una lista: vanno quindi inserite mediante i tag di lista (errore semantico)
3. togli dal codice HTML tutti i tag e gli attributi di formattazione, sostituendoli con opportuni attributi CSS: in qualche caso vanno in contrasto con i CSS, e la resa e` diversa in browser diversi (es: bgcolor="#FFFFCC")

[corte]

intanto grazie!!!

1.ora provvedero
2.l'ho fatto subito dopo aver letto alcune discussioni e postato la mia domanda qui , solo che utilizzando il tag[*]le immagini nn son piu centrate nel div e nn riesco a risolverlo....
3.provvedero

[corte]

non capisco dove sbaglio...
allora la pagina una volta sistemata come mi hai detto dovrebbe venire cosi (solo la parte che contiene le immagini):

<div class="miniature">
<ul>
<li id="corte">[img]miniature/thumbnail/thumbnail_04.png[/img][/list]
</div>

poi ho pensato il css relativo alla parte con le immagini cosi:

.miniature img {
border:1px solid #66ccff;
}
#corte img:hover {
background: url(../images/traparenza-rolover.png)
0px 0px;
}

[Mich_]

No, quello non funziona in IE, per cui e` meglio evitarlo.
Poi ho visto che l'oggetto opaco lo vuoi sovrapporre all'immagine: prima pensavo che volessi un rollover, cioe` un cambio dell'immagine stessa. Chiaramente le cose sono diverse.

Dovrebbe essere qualcosa del tipo:
HTML:

<ul id="miniature">[*]<a href="miniature/x.jpg" rel="lightbox[Corte]" title="x">
    [img]miniature/thumbnail/thumbnail_04.png[/img]
    <span>&amp;nbsp;</span>
  </a>[*]<a href="..." rel="lightbox[...]" title="x">
    [img]...[/img]
    <span>&amp;nbsp;</span>
  </a>
  ...[/list]

CSS:

#miniature {
  ...
}
#miniature li {
  float: left;
  width: ...;
  height: ...;
  ...
}
#miniature a {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}
#miniature img {
  position: absolute;
  width:...; height: ...;
  top:0; height: 0;
  z-index: 10;
}
#miniature span {
  background: transparent url(trasparente.png) repeat;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top:0; height: 0;
  z-index: 20;
}
#miniature a:hover span {
  background: transparent (url(semitrasp.png) repeat;
}

Come vedi lo span serve per sovrapporsi all'immagine.
Nei due stati avra` sfondo diverso: un'immagine trasparente (ti basta di 1pxX1px) ed un'immagine semitrasparente.
Per fare in modo che lo span si sovrapponga all'immagine, sia lo span che l'img devono essere posizionate in modo assoluto e con top e left a zero. Questo richiede che l'<a> (l'elemento che li contiene) sia posizionato in modo relativo.
A sua volta l'<a> deve essere trasformato in blocco (sia per poter contenere elementi di blocco e sia per poter essere posizionato).
La pseudoclasse :hover e` applicata al link, altrimenti non funziona in IE6.
Lo <span> non e` vuoto (alcuni brwoser ignorano gli elementi vuoti).

Ho tolto l'id del li, che per quello che volevo fare io non serve, ma forse ti serve per altre cose JS o CSS (o forse ti servira` applciata all'img o ad altro elemento).
Ho racchiuso tutto in un blocco <ul>, cui ho assengato un id (non una classe: in questo contesto mi sembra piu` adatto)