Oft hat man das Problem das Java-Script nicht unterstützt oder gar blockierd wird. Was macht man nun wenn man dynamisch Bilder vergrößern möchte? Die Lösung ist einfach wie genial. Wir nutzen den "hover"-effect des CSS aus.
<a href="#"><img src="/image.jpg" alt="my image" /></a>
Die Bilder werden alle in eine Liste gepackt:
ul#thumbs a{
display:block;
float:left;
width:100px;
height:100px;
line-height:100px;
overflow:hidden;
position:relative;
z-index:1;
}
ul#thumbs a img{
float:left;
position:absolute;
top:-20px;
left:-50px;
}
Die kleinen Bilder (Thumbnails) werden wie folgt deklariert:
ul#thumbs a img{
float:left;
position:absolute;
top:-20px;
left:-50px;
}
ul#thumbs li#image1 a img{
top:-28px;
left:-55px;
}
ul#thumbs li#image2 a img{
top:-18px;
left:-48px;
}
ul#thumbs li#image3 a img{
top:-21px;
left:-30px;
}
.
.
.
Zum Schluss muss noch der wichtigste Teil - der Hover-Effekt beschrieben werden. Der Z-Index spielt hierbei eine große Rolle da das Hover-Bild über das Thumb gelegt wird.
ul#thumbs a:hover{
overflow:visible;
z-index:1000;
border:none;
} 
