homepage Welcome to WebmasterWorld Guest from 54.166.95.146
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS: place text over image links
transparent rollover
Doood




msg:3388165
 11:30 pm on Jul 6, 2007 (gmt 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.

 

Marshall




msg:3388182
 12:05 am on Jul 7, 2007 (gmt 0)

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

Doood




msg:3388193
 12:37 am on Jul 7, 2007 (gmt 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.

Marshall




msg:3388227
 1:48 am on Jul 7, 2007 (gmt 0)

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

Doood




msg:3388281
 4:36 am on Jul 7, 2007 (gmt 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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved