#galerie li
{
list-style-type: none;
float:left;
margin: 0px 10px 10px 0px;
text-align: center;
font-weight: bold;
position: relative;

}

#galerie img
{
width: 110px;
height: 130px;
display: inline;
padding: 2px;
border: 1px solid #8B0000;
margin-top:270px;

}
#galerie img.unten
{
width: 120px;
height: 152px;
display: inline;
padding: 3px;
border: 1px solid #8B0000;
margin-top:320px;


}
#galerie a .tooltip
{
display: none;
}

#galerie a:hover .tooltip
{
width: 400px;
height: 248px;
display: block;
position: absolute;
top: -50px;
left: -70px;
z-index: 1;
background: #fff;
}

/*--Spezialangaben für den Internet Explorer 7--*/
*+html #galerie a:hover { z-index: 1;}
*+html #galerie li{position: static;}
*+html #galerie a {position: relative;}

/*--Spezialangaben für den Internet Explorer 6--*/
*html #galerie a:hover {display: block; z-index: 1;}
*html #galerie li{position: static;}
*html #galerie a {position: relative;}



</style>



<div id="galerie">

<ul>
<li><a href="#"><img src="../images/alex.jpg"><img src="../images/toolalex.jpg"  class="tooltip"></a></li>

<li><a href="#"><img src="../images/birgit.jpg" class="unten"><img src="../images/toolbirgit.jpg" class="tooltip"></a></li>

<li><a href="#"><img src="../images/rene.jpg" ><img src="../images/toolrene.jpg"  class="tooltip"></a></li>

<li><a href="#"><img src="../images/ena.jpg" class="unten"><img src="../images/toolena.jpg" class="tooltip"></a></li>

<li><a href="#"><img src="../images/robin.jpg"><img src="../images/toolrobin.jpg" class="tooltip"></a></li>