CSS: How to show an image while hovering over a link

If you are designing a website and want a picture to be shown when the user hovers their mouse over a link, this is how:

Create your a tag css as you normally would, with text behavior for :link and :visited. When you get to :hover, you want to leave the other parameters (like padding or margins) the same while telling the text color (color:none;) to disappear and loading a background image instead, as seen in the picture below:

how to create a hover image

One detail to note is that if the image is not sized correctly, you may need to adjust the padding to that the entire image is displayed with accuracy.


Casey Bradford

~ by caseybradfo on October 18, 2011.

%d bloggers like this: