我想在悬停时应用叠加图像

Question

但我很挣扎。

我对css的代码是：

#gallery img {
width:700px;
height:213px;
margin:0;
padding:0;
}

所以我想......

#gallery img:hover {
    width:700px;
    height:213px;
    position: relative;
    z-index:10000;
    background: transparent url(../images/imgOverlay-Zoom.png) no-repeat center center;
}

会工作，但它没有。

我在悬停时透明覆盖的图像是：

我做错了什么。 我想我可能在某个地方有一个腐败的css标签。

任何帮助表示感谢。

Answer 1

让#gallery拥有背景图片，而不是在其中包含图片标记...否则它将位于背景之上。然后在其中有另一个具有:hover伪类的div。如果仍然无效，请取出transparent。

或者你无法覆盖图像，只是将原始图像换成组合图像？

Answer 2

你好 我认为你误解了CSS的机制： 图像本身是一个对象，指定的背景在它后面。 因此，您必须将非透明图像作为背景，并在src中指定透明图像。但是这不适合您的需求。 使用CSS的解决方法会很麻烦，所以我建议用css悬停或javascript onMouseover或jQuery交换整个图像 - 因为这是正确的方法，所以要熟悉它们。

Answer 3

固定。 的CSS：

#container { position:relative; width:700px; height:213px;}
    .image { position:absolute; width:700px; height:213px; z-index:0;}
    .overlay { background-image:none); position:absolute; width:700px; height:213px; z-index:1;}
    .overlay:hover { background: transparent url(images/imgOverlay-Zoom.png)no-repeat center center;}

HTML：

<div class="overlay" ></div>
<div class="image" ><img src="images/listing-page-with-gradient.png" /></div>