CSS Image Gallery adjustments
I need a simple image gallery so I decide开发者_运维问答d to build it entirly on CSS, and tried to find something appropriate in the net.I found something very close to what I want, here are the applied CSS styles:
<html>
<head>
<title>Gallery</title>
<style type="text/css">
body {
margin: 0 auto;
padding: 0;
width: 500px;
color: #000000;
font: normal 80%/120% Georgia, "Times New Roman", Times, serif;
}
a
{
color: #000000;
}
.gallery {
list-style: none;
margin: 0;
padding: 0;
}
.gallery li {
margin: 10px;
padding: 0;
float: left;
position: relative;
width: 120px;
height: 100px;
}
.gallery img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
width: 110;
height: 90;
}
.gallery span {
width: 77px;
height: 27px;
display: block;
position: absolute;
top: -12px;
left: 50px;
background: url(images/tape.png) no-repeat;
}
.gallery a:hover img {border: 1px solid #0000ff; width:400; height:300; overflow: auto}
</style>
</head>
<body>
<ul class="gallery">
<li><a href="#"><span></span><img src="image/8.jpg" alt="image" /></a></li>
<li><a href="#"><span></span><img src="image/9.jpg" alt="image" /></a></li>
<li><a href="#"><span></span><img src="image/4.jpg" alt="image" /></a></li>
<li><a href="#"><span></span><img src="image/7.jpg" alt="image" /></a></li>
<li><a href="#"><span></span><img src="image/5.jpg" alt="image" /></a></li>
<li><a href="#"><span></span><img src="image/6.jpg" alt="image" /></a></li>
<li><a href="#"><span></span><img src="image/3.jpg" alt="image" /></a></li>
<li><a href="#"><span></span><img src="image/1.jpg" alt="image" /></a></li>
<li><a href="#"><span></span><img src="image/2.jpg" alt="image" /></a></li>
</ul>
</body>
</html>
In fact I don't even know why i need .gallery span{} (maybe some tips here) But the main problem is this:
Pic1:
This is how my gallery looks and I want it to look just like that, but when i a:hover and enlarge the image here's what happen
Pic2:
and to make it clear one more picture
Pic3:
What I need, and want to accomplish is all enlarged images to appear like this:
Pic4:
but obviously in front of the thumbnails.Any help please.
Thanks
Leron
Add position: relative; to your body style, remove position: relative; from .gallery li, and add position: absolute; top: 0; left: 0; to .gallery a:hover img.
Your final CSS being:
<style type="text/css">
body {
margin: 0 auto;
padding: 0;
width: 500px;
color: #000000;
font: normal 80%/120% Georgia, "Times New Roman", Times, serif;
position: relative;
}
a
{
color: #000000;
}
.gallery {
list-style: none;
margin: 0;
padding: 0;
}
.gallery li {
margin: 10px;
padding: 0;
float: left;
width: 120px;
height: 100px;
}
.gallery img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
width: 110;
height: 90;
}
.gallery span {
width: 77px;
height: 27px;
display: block;
position: absolute;
top: -12px;
left: 50px;
background: url(images/tape.png) no-repeat;
}
.gallery a:hover img {border: 1px solid #0000ff; width:400; height:300; overflow: auto; position: absolute; top: 0; left: 0;}
</style>
You need to use the z-index property:
.gallery a:hover img {
....
z-index: 10;
}
加载中,请稍侯......
精彩评论