This is an awesome trick to protect your images.You can protect your images from copying with this Simple CSS Blogger Tricks.After applying this trick the person who save the image will get a transparent image instead of the original image.
Demo
Demo
Try to Save the below image
Protect your image Trick for all images (UPDATED VERSION)
What's inside this article
Protect your image Trick 1 -With overlap image
Protect your image Trick 2 -With span background image
Protect your image Trick for all images (UPDATED VERSION)
What's inside this article
Protect your image Trick 1 -With overlap image
Protect your image Trick 2 -With span background image
Protect your image with CSS overlapping
- Go to Blogger Account
- Use the Following trick
<img src="Place image URL Here" />
<img border="0" src="http://i.imgur.com/eYKPf7b.png" alt="NetOops protected image" width="200" height="200" style="left: 0px; opacity: 0; position: relative; top: -216px;" />
<img border="0" src="http://i.imgur.com/eYKPf7b.png" alt="NetOops protected image" width="200" height="200" style="left: 0px; opacity: 0; position: relative; top: -216px;" />
- You can use this code anywhere, if you want to protect an image in your post. Add image and switch to HTML tab and copy the URL of image(eg- http://3.bp.blogspot.com/-xxxxx/xxxxx/s1600/name-of-image.jpg) and paste to that code mentioned above.
- That's it.
Protect your image with SPAN background
- Use the following code
<span style="background-image: url(Place image URL here)"><img src="http://i.imgur.com/eYKPf7b.png" width="200" height="200" border="0" alt="NetOops protected Image."></span>
- You are done..