Cercando una soluzione coi soli css, inserendo l'immagine della locandina non più come sfondo, ho provato così:
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)codice: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; }
questo il codice html
codice:<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![]()