Like my work? If you're looking for a Bracknell Web Design Agency then drop us a line at 'Nine Four' and we can hook up for a chat.

Adding on hover copyright to Lightbox Monday February 13, 2006

Listen to this

Tag this

I’ve been using Lightbox by Lokesh Dakar on a current project and needed to add a simple copyright message on hover just to remind those nice users that they really shouldn’t simply rip my client off by printing little snap shots directly from his website.

Obviosuly this won’t deter the determined, it’s by no means bulletproof, but perhaps will serve as a gentle reminder to others.

#lightbox {
background-image: url(/assets/copyright.gif);
background-position: center;
background-repeat: no-repeat;
}
#lightbox a:hover img#lightboxImage {
filter:alpha(opacity=50);
-moz-opacity: 0.50;
opacity: 0.50;
}

At first I was looking for an easy way to script the overlay of a PNG with a copyright text but in the end I just went with a nice little opacity effect on the photo in question, thus revealing a copyright message which had been set as the containing DIV background image. Keep it simple stupid.

Of course, if you know of a better method, let me know. :)

Posted in: Code Code

 
Play online poker at Full Tilt Poker and PokerStars. The best online poker rooms still open to US players. welike-Poker.com provides unbiased and critical online poker room reviews.

  1. Paul Cripps

    Feb 14, 09:06 AM

    I saw a photographers site some time ago using a similar method. He has a table ( ok not too good a start) with an empty image in, and the td has a background image (the chosen photo).

    My mate Matt Spour is a photographer, I’ll have to ask and see if he’ used anything similar.

  2. Nathan Pitman

    Feb 14, 01:27 PM

    To do that I’d have to pass the image dimensions to the blank image somehow… not being a javascript guru I’m not sure how that’d work, hence my CSS based approach! :)
Leave your comments
name:
email: Gravatar enabled.
http://
Format your message with Textile.
Remember

related

recently

The 10 most recent articles.