css - 在相册中定位 图像

Question

我正在使用 HTML 和 CSS 创建一个“悬停”照片库，“悬停”会在缩略图下方生成一个大图像”我的 HTML 如下所示:

<div id="container">
    <a class="thumbnail" href="#thumb"><img src="thumb1.jpg" /><span><img src="photo1.jpg" /><br />Simply beautiful.</span></a>

我已将容器设置为 900 像素宽，并将其下方的行重复 8 次。这会将 8 个缩略图排成一行，从容器的左上角开始。

我可以在 CSS 代码中使用“top”将图像的位置设置在这条拇指线下方，但不能设置图像的左右位置。它始终从相应缩略图的右侧开始。

我似乎已经尝试了一切，但希望我没有。

帮助!请。

Answer 1

这个 CSS 应该有帮助:

.thumbnail {
    position: relative;
}

.thumbnail span {
    display: none;
}

.thumbnail:hover span {
    display: block;
    position: absolute;
    top: 30px;
    left: 0;

    background: #fff;
    padding: 10px;
}

这应该将 span 定位到与拇指距离左边缘相同的距离。

一个工作示例:

http://www.ulmanen.fi/stuff/hoverthumb/