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

<div style=”border:0;”>
<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>

Tags: | |
Nord VPN Sale

Deepanker Verma is the founder of Techlomedia. He is a tech blogger, developer and gadget freak.

Similar Articles

2020 UseThisTip | Developed By Deepanker