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;		
		}