悬停的水印图像

Question

我有图像字段，并试图在它上面获取水印，同时悬停此图像。我试过简单的img：悬停，但悬停图像仍在我的主要img下。任何想法如何使我的悬停图像更高，然后我的主要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;> 

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