悬停时的水印图像

Question

我有图像区域，我正在尝试在其上留下水印，同时将鼠标悬停在此图像上。我试过简单的img：hover，但悬停图像仍在我的主要img下。任何想法如何让我的悬停图像高于我的主要图像。

Answer 1

试试这个 - http://jsfiddle.net/2UQ6N/

<div>
    <img src="http://lorempixel.com/300/200" />
    <img src="http://cdn-img.easyicon.cn/png/270/27093.png" class="watermark" />
</div>

div {
    position: relative;
    display: inline-block;
}

div:hover img.watermark {
    display: block;
}

img.watermark {
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: .6;
    display: none;
}

Answer 2

您需要稍后将悬停图像放入文档流程中，或将z-index增加到高于其覆盖的图像。

人们毫无疑问会提到，如果他们愿意，这不会阻止人们抓住你的形象。

Answer 3

您必须设置一个位置：相对于将图像放在顶部。

<img src="images/image1" width="225" height="219" border="0"> 


<img src="images/image2" width="250" height="372" border="0" style="position: relative;> 

所以在你的：悬停你添加位置：相对于你的顶部图像。