How to change the color of an image on hover

Question

I need to change the background color of an image. The image is a circle image with white background, I need when you hover over it change the background of the circle image to blue. I need only the circle to be change.

My HTML code is

<div class="fb-icon">
<a href="http://www.facebook.com/mypage" target="_blank">
<img src="images/fb_normal.png" alt="Facebook">
</a>
</div>

In CSS I wrote:

.fb-icon:hover {
    background: blue;
}

The above code gives me blue color but as a frame around the circle icon. what I need is to change the background of the circle itself. Imagine it's like a signal it's white when you hover by mouse it goes to blue.

Please I need a solution if it can be done by CSS or whatever. Sorry if I make it too long.

The problem: link

Answer 1

If the icon is from Font Awesome (https://fontawesome.com/icons/) then you could tap into the color css property to change it's background.

fb-icon{
color:none;
}

fb-icon:hover{
color:#0000ff;
}

This is irrespective of the color it had. So you could use an entirely different color in its usual state and define another in its active state.