懸停的水印圖像

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;> 

所以在你的：懸停你添加位置：相對於你的頂級圖像。