Image protection with CSS transparent overlay!

Discussion in 'HTML & Website Design' started by sandrodz, Aug 1, 2010.

  1. #1
    Hi,

    I'm trying to make transparent image overlay to protect my photos. I have this code:

    /*Protection*/
    #cover {position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; background-image:url(overlay.gif); image-repeat:repeat;}

    and in the body <div id="cover"></div>

    What this does it overlays everything, but the problem is that I get links and such unclickable behind zindex glass, any workaround for this?
     
    sandrodz, Aug 1, 2010 IP
  2. lonewolff

    lonewolff Member

    Messages:
    338
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    30
    #2
    Yes, just position a transparent overlay with the same dimensions 'absolutley' over the image in question.

    This wont stop he 'Print Screen' button and a paste into photoshop, though.
     
    lonewolff, Aug 1, 2010 IP
  3. Kerosene

    Kerosene Alpha & Omega™ Staff

    Messages:
    11,366
    Likes Received:
    575
    Best Answers:
    4
    Trophy Points:
    385
    #3
    It also won't stop people from blocking overlay.gif using Adblock Plus etc.
    e.g The old "flickr spaceball.gif hack".

    It's not worth it. Anyone who wants to copy your photos will know how to do it.
    Watermark them (if you must) and hope for the best.
     
    Kerosene, Aug 1, 2010 IP
  4. sandrodz

    sandrodz Peon

    Messages:
    1,482
    Likes Received:
    29
    Best Answers:
    0
    Trophy Points:
    0
    #4
    But I do believe that it will discourage lazy ass little kid rippers at least S:

    original question stays, I cannot make links work behind overlay gif.
     
    sandrodz, Aug 2, 2010 IP
  5. Kerosene

    Kerosene Alpha & Omega™ Staff

    Messages:
    11,366
    Likes Received:
    575
    Best Answers:
    4
    Trophy Points:
    385
    #5
    Why not do it like flickr does it.
    Use your photo as the background, and then display a transparent gif over the top of it.
     
    Kerosene, Aug 2, 2010 IP
  6. sandrodz

    sandrodz Peon

    Messages:
    1,482
    Likes Received:
    29
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I'm doing exactly that?

    oh no I got it, to do it the other way around...

    thx
     
    sandrodz, Aug 17, 2010 IP