Pure CSS Image Hover

HTML & CSS
1

Hello,

I have some images with a snippet of text below each image. For each one, the image and text are a single link.

Here is an example:

I want to make it so that when the mouse cursor hovers over either the image or the text, the image changes to a different color. I already created two versions of the images, but am now looking for some code for the hover effect.

Any help is appreciated.

2

[font=calibri]The easiest way is to give the <a> some padding and make it a background image, which you can then change on :hover and :focus.

So your HTML will be nice and simple:

<p>
<a href="one.htm">One</a>
<a href="two.htm">And here's the second one</a>
</p>

and your CSS will be along the lines of:

a {display:inline-block; padding-top:30px; margin:1em; min-width:30px; background-position:top; background-repeat:no-repeat; text-align:center;}
a:link, a:visited {background-image:url('normal.png');}
a:hover, a:focus {background-image:url('hover.png');}

(dimensions chosen for a 25×25px image).[/font]