Change the picture onhover position along with the text

I listed categories in my websi开发者_如何转开发te on my home page. I want the image to change to the blue version of it onhover position. I also want that picture to change to the blue version when Computer Services heading is onhover in onhover position. I coded one way but it looks like is not working properly because I went inside of the image it changed then it went back several times. Is there anybody can help me with this ?

Here is the coding I made for this; http://jsfiddle.net/4M2sr/

Note: I don`t want that black text to change the color of heading or picture.

What's happening is that your <p> tag is sitting on top of the other elements, blocking the on-hover effect when you mouse over the middle of the image. There are a couple of ways you can fix this:

• Use z-index to fix this problem by forcing the <p> tag behind the other elements.

• Change the <p> tag to an inline tag, like <span>.

• Apply display: inline to the <p> tag's style.

Note: if you use the second or third, you may need to adjust the positioning styles of the <p> tag.