Selbstverständlich! Sorry, wo hatte ich nur mein Kopf gelassen.
So sieht die ganze Geschichte aus:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#gallery ul {
list-style: none;
}
#gallery ul li, #gallery ul li a {
display: block;
}
#gallery ul li:not(:first-child) {
float: left;
border: 1px solid #FFF;
}
#gallery ul li a {
text-decoration: none;
color: #FFF;
background-color: lightblue;
}
#gallery ul li a {
opacity: 0.6;
}
#gallery ul li:not(:first-child) a:first-child {
padding: 10px;
}
#gallery ul li a:last-child {
position: absolute;
top: 42px;
left: 1px;
width: 188px;
height: 188px;
text-align: center;
z-index: 1;
}
#gallery ul li:not(:first-child) a:last-child {
display: none;
}
#gallery ul li:not(:first-child):hover a, #gallery ul li:not(:first-child):target a {
display: block;
opacity: 1;
}
#gallery ul li:not(:first-child) a:first-child:hover + a {
z-index: 2;
}
</style>
</head>
<body>
<div id="gallery">
<ul>
<!-- large -->
<li> <a href="#1">#default</a> </li>
<!-- thumbs -->
<li id="li1"> <a href="#li1">#1</a> <a href="#">Bild #1</a> </li>
<li id="li2"> <a href="#li2">#2</a> <a href="#">Bild #2</a> </li>
<li id="li3"> <a href="#li3">#3</a> <a href="#">Bild #3</a> </li>
<li id="li4"> <a href="#li4">#4</a> <a href="#">Bild #4</a> </li>
<li id="li5"> <a href="#li5">#5</a> <a href="#">Bild #5</a> </li>
</ul>
</div>
</body>
</html>