logo
  Fotoviewer
  .

 
IN DE CSS
.fotocontainer
{ position: relative; height: 400px;}
(deze aanpassen aan de hoogte van de grootste afbeelding)
.thumb img { }
.thumb:hover { }
.thumb:hover img { }
.thumb span { position: absolute; visibility: hidden; }
.thumb span img
{ border: 5px; border-color: #ffffff;
border-style: solid;}
.thumb:hover span
{ visibility: visible; top: 0px; left: 278px; font-family: arial;
font-size: 10pt;
text-decoration: none;
color: #000000;
text-align: center;
z-index: 100;}

 
TUSSEN DE BODY TAGS
<div class="fotocontainer">
<a class="thumb" href="#">
<img src="1.jpg" width="60px" height="40px" border="0" alt="foto1">
<span><img src="1.jpg">
Dit is foto nummer foto 1</span></a>

<a class="thumb" href="#">
<img src="2.jpg" width="60px" height="40px" border="0" alt="foto2">
<span><img src="2.jpg">
Dit is foto nummer foto 2</span></a>

<a class="thumb" href="#">
<img src="3.jpg" width="60px" height="40px" border="0" alt="foto3">
<span><img src="3.jpg">
Dit is foto nummer foto 3</span></a>

<a class="thumb" href="#"><img src="4.jpg" width="60px" height="40px" border="0" alt="foto4">
<span><img src="4.jpg">
Dit is foto nummer foto 4</span></a>

<a class="thumb" href="#">
<img src="5.jpg" width="60px" height="40px" border="0" alt="foto5">
<span><img src="5.jpg">
Dit is foto nummer foto 5</span></a>
</div>


 
eind