gif trasparente sopra immagine

[ciarri]

Salve a tutti
ho un bel problema che non riesco proprio a risolvere, vorrei mettere una gif trasparente sopra un'immagine al passaggio del mouse ma non riesco proprio.
vorrei un'effetto sulla foto uguale a questo: http://www.mymovies.it/film/2009/themessage/ in questo caso appare un play trasparente sopra la foto della ragazza.. e non viceversa come si trova in varie guide che mettono la foto trasparente per far vedere lo sfondo.

grazie in anticipo

[Prill]

Ciao Ciarri,
il sistema adottato in quella pagina usa javascript, mostrando e nascondendo un'immagine al passaggio del mouse su un contenitore che ha un'immagine di sfondo, codice di esempio:

<div style="width:...px; height:...px; background-image:url(immagineDiSfondo.estensione);" onmouseout="document.getElementById('IdMiaImmagine').style.display='none'" onmouseover="document.getElementById('IdMiaImmagine').style.display='inline'">
       [img]immagine.estensione[/img]                  
</div>

volendo farlo solo coi css, se hai lì un collegamento, puoi invece sfruttare lo stato hover dei link, assegnando a questo come sfondo l'immagine che dovrà apparire e l'immagine fissa in secondo piano sempre come sfondo di un contenitore in cui il link si troverà

[ciarri]

Prill grazie tanto per l'aiuto
purtroppo non sono proprio pratico di queste cose anche se mi appassionano da perderci la testa... ho fatto alcune prove con l'esempio da te postato ma non è esattamente quello che volevo, mi spiego, la foto dovrebbe avere un collegamento e come sfondo la foto si riproduce per tutta la grandezza del div o della tabella e vorrei chiederti come posso dare il collegamento http all'immagine di sfondo per far aprire una pagina.
dovrei fare un sito con varie locandine di film che non hanno la solita misura in larghezza e quindi come sfondo si vedono sdoppiate.

fose mi puoi fare il favore di mostrarmi anche un'esempio di codice dei css

grazie

[Prill]

Per non avere lo sfondo ripetuto, penso questo tu intenda, oltre all'assegnare al contenitore le stesse dimensioni dell'immagine di sfondo, si può impostare un background-repeat: no-repeat;.
Rimanendo con l'esempio precedente, l'immagine col play dovrebbe avere le stesse dimensioni dello sfondo e basterebbe renderla un link racchiudendola all'interno del tag a.

Ma possiamo anche inserire la locandina come sfondo del link (il quale però dovrà avere un display:block e dimensioni specificate, corrispoondenti a qulle della locandina stessa) e l'immagine play, o corrispondente) al suo interno, nascosta o mostrata modificando la proprietà display oppure con diversa opacity sullo stato normale e su quello hover, e portata nella posizione voluta attraverso il padding.
Immaginiamo per esempio di avere una locandina "zorro" larga 300 pixel e alta 500:

 
<style type="text/css">
<!--
a.zorro {
	width:300px;
	height:500px;
	background-image: url(zorro.jpg);
	background-repeat: no-repeat;
}
a.zorro img {
    opacity:0;
    border:none;
}
a.zorro:hover img {
    opacity:1;
}
-->
</style>
<!--[if lte IE 8]><style type="text/css">

a.zorro img {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}
a.zorro:hover img {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
}
</style><![endif]-->

Riporto l'esempio con opacity perché richiede codice diverso per Exlorer, altrimenti con display via dal css la proprietà opacity, via il css per Explorer e un display:none sullo stato normale e display:inline su hover (devo dire però che quest'ultima soluzione, col display, non ho tempo adesso per verificarne il motivo, mi dà problemi su Explorer6)

In body invece avremo

[img]immagine_a_comparsa.estensione[/img]

[Prill]

P.S.: ho saltato in display:block; in a.zorro

[ciarri]

il codice funziona perfettamente, complimenti
adesso però il problema è questo, io devo fare 100 locandine (differenti) cliccabili con quell'effeto play ma nel body posso modificare l'immagine del play (che è sempre la stessa) mentre invece devo modificare l'iimmagine della locandina e lasciare il css sempre lo stesso ed invece l'immagine della locandina rimane come sfondo nel css

spero di essermi fatto capire perche sono fuso con questo problem
grazie

[Prill]

Cercando una soluzione coi soli css, inserendo l'immagine della locandina non più come sfondo, ho provato così:

img {
	border:none;
}
a.locandina {
	position:relative; display:inline-block;
}
* html a.locandina:hover { 
	background: transparent; /* per Explorer 6 che richiede un'istruzione per lo stato hover del link */
}
a.locandina span {
	display:block;
	position:absolute;
	width:150px;
	height:200px;
	visibility:hidden;
	top: 50%;
	left: 50%;
	margin: -100px 0 0 -75px;
}
a.locandina:hover span {
	visibility:visible;

}

dove a.locandina è la classe applicata a tutti i link, il display inline-block mi serve a mostrare correttamente lo span che viene centrato in maniera assoluta facendo occupare al link non tutta la riga ma solo lo spazio necessario e tuttavia mostrandolo come blocco. Ho considerato una immagine a comparsa di 150x200, e quindi uno span che abbia quelle misure, le dimensioni possono essere modificate cambiando parallelamente il valore dei margini negativi (metà della larghezza e dell'altezza)

questo il codice html

<div>[img]zorro.jpg[/img] <span>[img]immagine_a_comparsa.estensione[/img]</span></div>

Non mi vengono in mente altre soluzioni rapide coi soli css, altri magari potranno aggiungerne o consigliarti soluzioni più efficaci attraverso qualche script che ti possa abbreviare il lavoro evitandoti di inserire manualmente tutte le locandine e l'immagine sopra