homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Link Hover and Image Display

5+ Year Member

Msg#: 3289336 posted 7:03 am on Mar 22, 2007 (gmt 0)

Hi guys,

Am new to web development and enjoy reading postings.Need some assistance as well.

I have created on my test website links that give me an image background when hovered over.However when this happens the test is almost invisible thus cannot be seen clearly.Code am using is

#menu a:hover{display:block; text-decoration:none; background:url(picture.jpeg); width:100px; height:200px;}

However this does not produce desired outcomes.I would like a picture to display when a link is hovered over but not on the link but instead on the side of the link.

Please advice how that can be done.





10+ Year Member

Msg#: 3289336 posted 12:09 pm on Mar 22, 2007 (gmt 0)

You have to use other parameters of background property too. For example, if your link is a rectangular 100 px width and 200 px height, as you wrote, and suppose the image to display is 20 x 20 px, and you want to place it in the right upper corner of the link, you may use something like :#menu a:hover{display:block; text-decoration:none; background:url('./picture.jpeg') no-repeat top right; width:100px; height:200px; padding-right:25px;}

Did not understand this : "the test is almost invisible thus cannot be seen clearly." Do you see the image or not at all? If not, check the url above. Check earlier links declarations too, because in some cases they may interfere and affect that one.

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