I have image field, and im trying to get watermark on it, while hovering this image. I tried simple img:hover, but the hover image still under my main img. Any ideas how can i make my hover image to be higher then my main img.

I have image field, and im trying to get watermark on it, while hovering this image. I tried simple img:hover, but the hover image still under my main img. Any ideas how can i make my hover image to be higher then my main img.

• javascript
• jquery
• html
• css
• watermark

• Could you post a JS Fiddle for it. – Ravi Commented Jul 11, 2012 at 14:18
• ++ Code snippets or link to working samples would help. – folktrash Commented Jul 11, 2012 at 14:20
• jsfiddle/xxuHX Thats not exactly my code, i'm creating drupal project, but its the way im trying to create – Avdept Commented Jul 11, 2012 at 14:22

3 Answers 3

Try this - http://jsfiddle/2UQ6N/

<div>
    <img src="http://lorempixel./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;
}

You need to put the hover image later in the document flow or increase the z-index to be higher than the image it is covering.

As people will no doubt mention, this will not stop people from getting hold of your image if they want to.

You have to set a position: relative to put an image on top.

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


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

So on your :hover you add the position: relative to your top image.