Immagini che si ingrandiscono al passaggio del mouse

« Older   Newer »
  Share  
†Därk Angël†
icon4  CAT_IMG Posted on 18/11/2011, 12:41     +1   -1




Visto che Gyl mi ha chiesto come si inseriscono queste immagini, ho deciso di inaugurare questa sezione proprio con questo argomento.

Ecco cosa bisogna fare....
per prima cosa bisogna inserire questo codice in Amministrazione -> Colori e Stili (vi consiglio di metterlo in fondo):
CODICE
<style type="text/css">

.thumbnail{
position: relative;
z-index: 0;
}

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

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
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: 60px; /*position where enlarged image should offset horizontally */

}

</style>


E poi quest'altro codice dovete inserirlo dove volete che si attivi l'effetto (se volete metterlo nella Homepage dovete andare su Amministrazione -> Codici HTML):
CODICE
<a class="thumbnail" href=URL PAGINA><img src=LINK IMMAGINE PICCOLA CHE COMPARE SUL FORUM width="16px" height="53px" border="0" /><span><img src=LINK IMMAGINE CHE SI VEDE AL PASSAGGIO DEL MOUSE /><br />TESTO</span></a>


Se avete bisogno di spiegazioni basta chiedere ^_^
 
Top
0 replies since 18/11/2011, 12:41   163 views
  Share