How to Apply Watermark Effect to an Image Using CSS
Create a watermark in the images of your website is best way to protect the images from being used by another person. I had already shared a post on adding watermark to an image with PHP. In this post I will show how to add watermark effect on the image with the help of CSS.
The idea behind this trick is to add an image just above the another which will look like a watermark on the image. See the code below
<img src=”deepanker.jpg” width=309 height=459></img>
<div style=”position:relative; left: 0px; top: -159px; width:150px;”>
<img src=”logo.png” width=200 height=100>
Change the hieght and widhth of the images according to your images size. To change the location of watermark image, change the position of div which is placed inside.
To add a text watermark use the code given below
<div style=”margin-bottom:-49px; overflow:hidden;”>
<img src=”deepanker.jpg”/><br />
<div style=”position:relative; top: -20px;”/>Enter text here</div>