Kleine thumbnail kan worden bekeken in full-size zonder te moeten klikken, page-refresh, gewoon door te hoveren over de afbeelding.

HTML

<div class="zoom PZ3-r">
<a href="#"><img src="/pad/naar/afbeelding.jpg" alt="een afbeelding" />
<span class="PZ31cap">
<span class="PZ3inr">
<strong>Beschrijving:  </strong>Hier een omschrijving van je foto.
<em>
<span style="color:#ccf; background:inherit;">Photo by some guy</span>
</em>
</span>
</span>
</a>
</div>

CSS

.PZ3-l {
float:left;
margin-right:10px;
}
.PZ3-r {
float:right;
margin-left:10px;
}
html>/**/body .PZ3-r {
position:relative;
}
.zoom {
border:1px solid #369;
width:210px;
height:137px;
}
.zoom a, .zoom a:visited {
display:block;
padding:0;
overflow:hidden;
text-decoration:none;
height:100%;
width:100%;
}
html>/**/body .PZ3-r a {
right:0;
}
.zoom a:hover {
position:absolute;
z-index:999;
padding:0;
background:none;
cursor:pointer;
height:auto;
width:auto;
overflow:visible;
border:1px solid #369;
margin:-1px 0 0 -1px;
}
html>body .zoom a:hover {
margin:-1px -1px 0 -1px;
}
.zoom a img {
border:0;
height:100%;
width:100%;
}
.zoom a:hover img {
height:auto;
width:auto;
border:0;
}
a:hover .PZ31cap {
display:block;
font:10pt verdana,sans-serif;
margin-top:-3px;
background:#369;
width:276px;
color:#fff;
text-align:left;
}
.PZ3inr {
display:block;
padding:2px 5px;
}
.noCap a:hover .PZ31cap {
display:none;
}
.noBdr,.noBdr a:hover {
border:0;
}