Image Protection: CSS Image Layering

Unlike my last post this example of image protection uses the z-index property to place a transparent image on top of the image you want showcased.

What did I want to achieve by this and what other resources did I use?

(1) Saving the image by right clicking will only save the transparent image
(2) Google’s URL shortener was used to convert the normal image addresses
(3) The benefits of URL shortening are detailed here
(4) Low resolution images
(5) No click link to a larger image

Before I forget, many thanks to MediaCollege.com: Free video, audio and electronic media resources, who I looked to for guidance as I went about trying to replicate their example.

Now, while web feed results were a mixed punch it appears I’ve overcome a few hurdles in getting it right here.

First hurdle:

Formatting a centered HTML table and inserting into this two images (one transparent and the other the image above) inside a div. They were then positioned using CSS, and the transparent image with its greater z-index number being placed on top of the mousetrap image. (see code below)

Second hurdle:

My blog HTML gives post images the background colour of my post area. This gave my transparent image a background colour which hid the image I wanted visible. (see bolded text)

.post img { margin: 5px; padding: 5px; background: #f0f0e9; border: 1px solid #f0f0e9; }

This was overcome by giving the transparent image a transparent background in my code (see code below).

Third hurdle:

My level of CSS skill and all things like that in general.

A gentle reminder

For us bloggers it’s impossible to prevent images from being copied. The good news is that we can make things hard for novices.

Open Source Code

<br /> <table style="margin: 0px auto" border="0" cellspacing="0" cellpadding="0" align="center" border-spacing="0"><tbody> <tr> <td> <div style="width: 462px; height: 234px"><img style="z-index: 300; position: absolute; padding-bottom: 0px; margin: 0px auto; padding-left: 0px; padding-right: 0px; display: block; float: none; padding-top: 0px" src="http://goo.gl/vmpws" width="462" height="234" /><img style="z-index: 3000; position: absolute; text-align: center; padding-bottom: 0px; margin: 0px auto; padding-left: 0px; padding-right: 0px; display: block; background: none transparent scroll repeat 0% 0%; float: none; padding-top: 0px" title="Mouse Trap" border="0" alt="Mouse Trap" src="http://goo.gl/HpLJx" width="462" height="234" /></div> </td> </tr> </tbody></table> <br />

Other Open Source Image Posts:
Image Slicing and URL Shortening	LinkWithin Alternative Howzat	LinkWithin Alternative Howzat Part II
Howzat