Welcome to WebmasterWorld Guest from 23.20.110.176

Forum Moderators: not2easy

Message Too Old, No Replies

CSS: place text over image links

transparent rollover

     
11:30 pm on Jul 6, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 4, 2002
posts:187
votes: 0


I want to use a semi-transparent image to appear on top of image links.

Example would be when you hover over a product then the text "Click here to purchase" would appear on top of the image and the original image would still be visible.

I suppose just one image containing the text would be used, so like an image that's 100x100 wouldn't be replace but another image that's 100x100 would show up on top of it with the text.

Is this possible with css?

Other methods would require lots of coding and this would be just one image, a css style, and a span tag or something.

12:05 am on July 7, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 4, 2001
posts: 2173
votes: 13


An easy method using CSS would be to swap images on hover:

a:link {
background-image: url(link.gif);
}
a:hover {
background-image: url(hover.gif);
}

Marshall

12:37 am on July 7, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 4, 2002
posts:187
votes: 0


Yeah but then I'd need a seperate css style for every image I wanted the hover effect on. Plus I'd also have to create a seperate hover image for every one also.
1:48 am on July 7, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 4, 2001
posts:2173
votes: 13


Do you really need an image or will a title tag do? I do have a combination javascript and css that uses a <div> in relation to the mouse pointer.

Marshall

4:36 am on July 7, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 4, 2002
posts:187
votes: 0


Text may work just as well. I think I've found something that will probably do the job,
cssplay dot co dot uk slash opacity slash image_linktext