带旋转的CSS图像悬停 - Web工具包问题/在Firefox中正常工作

Question

删除示例的链接

问题：Webkit浏览器（Chrome和Safari）在我在页面上创建的轮换类出现问题。如果我删除内容div上的旋转类，则悬停时显示的大图像将显示在正确的位置。

Firefox对旋转的内容div没有任何问题。我在Mac上，所以我无法测试IE。

Answer 1

您已经提供了.thumbnail类position:relative，因此它正在创建自己的位置上下文。您给定的固定位置.thumbnail:hover span将使用它作为.thumbnail父级顶部的0位置。

从position: relative中删除.thumbnail并将top的{​​{1}}位置设置为您想要放置的值（现在，相对于窗口顶部，因为它有.thumbnail:hover span。

希望我的解释足够清楚！

Answer 2

首先，只能在.thumbnail:hover span{visibility:visible}中进行设置 其余的代码应该是这样的

.thumbnail span { 
    position: absolute;
    padding: 0px;
    visibility: hidden;
    color: black;
    text-decoration: none;
    height:530px;
    overflow: hidden;
    top: 0;
    left: 460px; 
}

位置应该相同。在您的代码中，您编写了绝对，但在悬停模式下设置了 fixed 。如果您希望图片显示在同一个位置，则应将其相对于 #portfolio 进行定位，而不是 .thumbnail 。所以添加以下内容：

#portfolio {position:relative}

删除

.thumbnail {position:relative}