CSS 图片库调整答案

【问题标题】：CSS Image Gallery adjustmentsCSS 图片库调整
【发布时间】：2011-06-20 18:24:26
【问题描述】：

我需要一个简单的图片库，所以我决定完全在 CSS 上构建它，并试图在网上找到合适的东西。我发现了一些非常接近我想要的东西，这里是应用的 CSS 样式：

<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>

事实上我什至不知道我为什么需要.gallery span{}（也许这里有一些提示）但主要问题是：图一：

这是我的画廊的外观，我希望它看起来像那样，但是当我 a:hover 并放大图像时会发生这种情况

图2：

再看一张图片

图3：

我需要并且想要完成的是所有放大的图像看起来像这样：

图4：

但显然在缩略图前面。请提供帮助。

谢谢

勒隆

【问题讨论】：

标签： css gallery

【解决方案1】：

将position: relative; 添加到您的体型中，从.gallery li 中删除position: relative;，并将position: absolute; top: 0; left: 0; 添加到.gallery a:hover img。

你最终的 CSS 是：

    <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>

【讨论】：

此外，为了正确分层 - 您需要将所有项目的 z-index 设置为 1，并将 z-index:2 添加到悬停类。话虽这么说，一点 javascript 会为您的项目增加很多。
致凯尔 B：谢谢，正是我想要的。
致 Bosworth99，谢谢伙计，也许将来我会尝试做一些更复杂的事情，但现在这可以解决问题，但如果不是问题，你能告诉我，z 是如何-index 将使我的画廊受益吗？

【解决方案2】：

您需要使用 z-index 属性：

.gallery a:hover img {
    ....
    z-index: 10;
}

【讨论】：