悬停时的水印图像答案

【问题标题】：Watermark image on hover悬停时的水印图像
【发布时间】：2012-07-11 14:16:53
【问题描述】：

我有图像字段，我试图在其上添加水印，同时悬停此图像。我尝试了简单的 img:hover，但悬停图像仍在我的主 img 下。任何想法如何让我的悬停图像高于我的主要图像。

【问题讨论】：

你能给它发一个 JS Fiddle 吗？
++ 代码 sn-ps 或链接到工作示例会有所帮助。
jsfiddle.net/xxuHX 这不完全是我的代码，我正在创建 drupal 项目，但它是我尝试创建的方式

标签： javascript jquery html css watermark

【解决方案1】：

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

【讨论】：

我对这段代码还有一个问题。我的图像不悬停时不透明度为 0.5，悬停时为 1.0。但是当我将光标从主图像移动到悬停图像时，不透明度消失了。任何想法如何解决这个问题？

【解决方案2】：

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

人们无疑会提到，如果他们愿意，这不会阻止人们掌握你的形象。

【讨论】：

【解决方案3】：

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

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


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

因此，在您的 :hover 上添加 position: 相对于您的顶部图像。

【讨论】：