Immagine che si Ingrandisce al passaggio del Mouse

« Older   Newer »
  Share  
PlayStation
icon10  view post Posted on 8/12/2008, 15:52




Questo codice serve per far ingrandire un'immagine quando si passa sopra alla sua anteprima in miniatura.

Per far si che l'immagine si ingrandisca non dovete far altro che hostare due immagini, un piccola tipo di 50x50 l'altra invece con le misure originali,
dopo dovrete inserire questo codice o in fondo a Modifica colori e stili oppure in Gestione Codice HTML --> Codice HTML che verrą visualizzato in ogni pagina in cima al sito

SPOILER (click to view)
CODICE
.thumbnail {position: relative;
z-index: 0}

.thumbnail:hover {background-color: transparent;
z-index: 9}

.thumbnail span {/*CSS for enlarged image*/
position: absolute;
background-color: none;
padding: 5px;
left: -1000px;
border: none;
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: 60px; /*position where enlarged image should offset horizontally */}


e poi dovrete incollare quest'altro codice nel punto dove volete far apparire l'immagine facendo attenzione di inserire il link dell'immagine piccola sempre per primo e il link per l'immagine grande sempre per seconda.

SPOILER (click to view)
CODICE
<a class="thumbnail" href=><img src="LINK IMMAGINE PICCOLA"><span><img src="LINK IMMAGINE GRANDE"></span></a>
 
Top
0 replies since 8/12/2008, 15:52   221 views
  Share