salve,
avevo bisogno di trovare un css che mi permettesse di ingrandire l'immagine al passaggio del mouse, leggendo qualche post del forum ho trovato questo link:
http://www.dynamicdrive.com/style/cs...-image-viewer/
Ora il tutto funziona soltanto che ho un problema:
con ie tutto ok, invece con firefox l'immagine viene visualizzata sì accanto a quella reale, però un bel pò più sotto... questo avviene sia nella mia pagina ma anche nella pagina linkata sopra (provate voi stessi)...
secondo voi da cosa dipende??
posto il codice html e il css sotto....
grazie in anticipo
HTML
<a class="thumbnail" href="#thumb">[img]media/tree_thumb.jpg[/img]<span>[img]media/tree.jpg[/img]
Simply beautiful.</span></a>
<a class="thumbnail" href="#thumb">[img]media/ocean_thumb.jpg[/img]<span>[img]media/ocean.jpg[/img]
So real, it's unreal. Or is it?</span></a>
CSS
.thumbnail{
position: relative;
z-index: 0;
text-decoration: none;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #FFFFFF;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 80px; /*position where enlarged image should offset horizontally */
}
Rispondi quotando
