Hallo.
Ich habe einen Div "#keeper" der Overflow: auto ist (soll aber später hidden sein weil ich das Scrollen mit Javascript realisiere). In diesem div sind mehrere Thumbs. Beim Hover über die Thumbs werden sie größer.
jedoch wird leider das vergrößerte hinter dem Div Keeper versteckt. Kann mir bitte einer von euch CSS Pro`s (der ich leider nicht bin) helfen.
Hier mal ein Bsp Code zum ausprobieren:
Danke im vorraus,
Ich habe einen Div "#keeper" der Overflow: auto ist (soll aber später hidden sein weil ich das Scrollen mit Javascript realisiere). In diesem div sind mehrere Thumbs. Beim Hover über die Thumbs werden sie größer.
jedoch wird leider das vergrößerte hinter dem Div Keeper versteckt. Kann mir bitte einer von euch CSS Pro`s (der ich leider nicht bin) helfen.
Hier mal ein Bsp Code zum ausprobieren:
HTML:
<html>
<head>
<title></title>
<style>
#keeper {
height: 450px;
width: 250px;
border: solid 1px #000;
overflow:auto;
position: relative;
}
#image_layer {
width: 250px;
background-color:red;
position: relative;;
}
/* thumbnail list */
ul#thumbs, ul#thumbs li{
margin:0;
padding:0;
list-style:none;
}
ul#thumbs li{
float:left;
margin-right:5px;
border:1px solid #999;
padding:2px;
}
ul#thumbs a{
display:block;
float:left;
width:100px;
height:100px;
line-height:100px;
overflow:hidden;
position:relative;
z-index:1;
}
ul#thumbs a img{
float:left;
position:absolute;
top:-20px;
left:-50px;
}
/* mouse over */
ul#thumbs a:hover{
overflow:visible;
z-index:1000;
border:none;
}
ul#thumbs a:hover img{
border:1px solid #999;
background:#fff;
padding:2px;
}
/* // mouse over */
/* clearing floats */
ul#thumbs:after, li#thumbs:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
ul#thumbs, li#thumbs{
display:block;
}
/* \*/
ul#thumbs, li#thumbs{
min-height:1%;
}
* html ul#thumbs, * html li#thumbs{
height:1%;
}
/* // clearing floats */
/* // thumbnail list */
</style>
</head>
<body>
<div id="keeper">
<div id="image_layer">
<ul id="thumbs">
<li><a href="#"><img src="http://cssglobe.com/lab/overflow_thumbs/image.jpg" /></a></li>
<li><a href="#"><img src="http://cssglobe.com/lab/overflow_thumbs/image.jpg" /></a></li>
<li><a href="#"><img src="http://cssglobe.com/lab/overflow_thumbs/image.jpg" /></a></li>
<li><a href="#"><img src="http://cssglobe.com/lab/overflow_thumbs/image.jpg" /></a></li>
<li><a href="#"><img src="http://cssglobe.com/lab/overflow_thumbs/image.jpg" /></a></li>
<li><a href="#"><img src="http://cssglobe.com/lab/overflow_thumbs/image.jpg" /></a></li>
<li><a href="#"><img src="http://cssglobe.com/lab/overflow_thumbs/image.jpg" /></a></li>
<li><a href="#"><img src="http://cssglobe.com/lab/overflow_thumbs/image.jpg" /></a></li>
<li><a href="#"><img src="http://cssglobe.com/lab/overflow_thumbs/image.jpg" /></a></li>
</div>
</div>
</body>
</html>Danke im vorraus,
Zuletzt bearbeitet:
