<div style="text-align: center;"><style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL:
http://www.dynamicdrive.com/style/ */
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0px 0px 0px 0px;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: ghostwhite;
padding: 5px;
left: -1000px;
border: 1px dotted 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*/
visibility: visible;
top: 80;
left: 100px; /*position where enlarged image should offset horizontally */
z-index: 60;
}
</style>
<div class="gallerycontainer">
<a class="thumbnail" href="#thumb">
<img width="
60" height="
60" border="0" alt="" src="
http://HIER KLEINES BILD" /><span>
<img alt="" src="
http://HIER GROßES BILD" /></span></a>
<a class="thumbnail" href="#thumb">
<img width="60" height="60" border="0" alt="" src="http://img.webme.com/pic/k/klein-paris/therme3-3.jpg" /><span>
<img alt="" src="http://img.webme.com/pic/k/klein-paris/therme3.jpg" /></span></a>
<a class="thumbnail" href="#thumb">
<img width="60" height="60" border="0" alt="" src="http://img.webme.com/pic/k/klein-paris/therme4-4.jpg" />
<span><img alt="" src="http://img.webme.com/pic/k/klein-paris/therme4.jpg" /></span></a>
<a class="thumbnail" href="#thumb"><img width="60" height="60" border="0" alt="" src="http://img.webme.com/pic/k/klein-paris/therme5-5.jpg" /><span>
<img alt="" src="http://img.webme.com/pic/k/klein-paris/therme5.jpg" /></span></a>
<a class="thumbnail" href="#thumb"><img width="60" height="60" border="0" alt="" src="http://img.webme.com/pic/k/klein-paris/therme6-6.jpg" /><span>
<img alt="" src="http://img.webme.com/pic/k/klein-paris/therme6.jpg" /></span></a></div>