当前位置： 文江博客 话题详情

CSS 图片库调整

发布于 2024-11-16 13:53:37 字数 2725 浏览 3 评论 0 原文

我需要一个简单的图像库，所以我决定完全在 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{} （也许这里有一些提示）但主要问题是这样的： Pic1：

这是我的画廊的外观，我希望它看起来像那样，但是当ia：将鼠标悬停并放大图像，这是发生的情况

Pic2:

在此处输入图像描述

并让另一张图片变得清晰

Pic3:

在此处输入图像描述

我需要并想要完成的是所有放大的图像显示如下：

Pic4:

在此处输入图像描述

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

谢谢勒伦

​

原文

I need a simple image gallery so I decided 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:

enter image description here

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:

enter image description here

and to make it clear one more picture

Pic3:

enter image description here

What I need, and want to accomplish is all enlarged images to appear like this:

Pic4:

enter image description here

but obviously in front of the thumbnails.Any help please.

Thanks

Leron

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

祁梦 2024-11-23 13:53:37

将 position:relative; 添加到您的正文样式，从 .gallery li 中删除 position:relative;，然后添加 position:absolute;顶部：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>

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>
回复 原文
雪落纷纷 2024-11-23 13:53:37

您需要使用 z-index 属性：

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

You need to use the z-index property:

.gallery a:hover img {
    ....
    z-index: 10;
}
回复 原文
~没有更多了~

关于作者

靑春怀旧

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

书间行客

文章 0 评论 0

我ぃ本無心為│何有愛

文章 0 评论 0

神妖

文章 0 评论 0

undefined

文章 0 评论 0

38169838

文章 0 评论 0

彡翼

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文