How to change image color on hover

Question

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

My HTML code

<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 code above gives me a blue color, but as a frame around the circle icon. I need to change the background of the circle itself. Imagine this is a white signal when you hover over blue.

Please, I need a solution if this can be done using CSS or whatever. Sorry if I do this for too long.

Problem: link

Answer 1

Ideally, you should use transparent PNG with a circle in white and against a transparent image. You can then set the background-color in .fb-icon to blue on hover. So you CSS:

 fb-icon{ background:none; } fb-icon:hover{ background:#0000ff; } 

In addition, if you do not want to use PNG, you can also use a sprite and change the position of the background. A sprite is one large image with a collection of smaller images that can be used as a background image by changing the position of the background. So, for example, if your original circle image with a white background is 100px X 100px , you can increase the image height to 100px X 200px , so the upper half is the original image with a white background, and the lower half is a new image with a blue background. Then you set your CSS as:

 fb-icon{ background:url('path/to/image/image.png') no-repeat 0 0; } fb-icon:hover{ background:url('path/to/image/image.png') no-repeat 0 -100px; } 

Answer 2

A bit late, but I came across this post.

This is not perfect, but here is what I do.

HTML code

 <div class="showcase-menu-social"><img class="margin-left-20" src="images/graphics/facebook-50x50.png" alt="facebook-50x50" width="50" height="50" /><img class="margin-left-20" src="images/graphics/twitter-50x50.png" alt="twitter-50x50" width="50" height="50" /><img class="margin-left-20" src="images/graphics/youtube-50x50.png" alt="youtube-50x50" width="50" height="50" /></div> 

CSS code

 .showcase-menu { margin-left:20px; margin-right:20px; padding: 0px 20px 0px 20px; background-color: #C37500; behavior: url(/css/border-radius.htc); border-radius: 20px; } .showcase-menu-social img:hover { background-color: #C37500; opacity:0.7 !important; filter:alpha(opacity=70) !important; /* For IE8 and earlier */ box-shadow: 0 0 0px #000000 !important; } 

Now my border radius of 20px exactly matches the radius of the border of the image. Since you can see that .showcase-menu has the same background as .showcase-menu-social. This is to allow the "opacity" to take effect, rather than the "square" background or borders, so the image slightly reduces the saturation on hover.

This is a good effect and gives the viewer feedback that the image is in focus. I am sure that on a darker background this will have even better effect.

It's nice that this is valid HTML-CSS code and will be validated. Honestly, it should work on elements without an image as well as images.

Enjoy it!

Answer 3

An alternative solution would be to use the new CSS mask image function, which works in everything except IE (still not supported in IE11). This would be more universal and supported than some of the other solutions offered here. You can also use SVG more widely. eg.

 item { mask: url('/mask-image.png'); } 

The following is an example of using a mask image:

 http://codepen.io/zerostyle/pen/tHimv 

and many examples:

 http://codepen.io/yoksel/full/fsdbu/ 

Answer 4

If I understood correctly, it would be easier if you gave your image a transparent background and set the background property of the background background without using filters, etc.

http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html

Shows how to use filters in IE. Maybe if you get something out of this. Not very compatible with multiple browsers. Another option would be to have two images and use them as background images (rather than img tags), exchange them one by one using the: hover pseudo-selector.

Answer 5

Ok, try the following:

Get the image with a transparent circle - http://i39.tinypic.com/15s97vd.png Put this image in an html element and change the background color of the element using css. This way you get a logo with a circle in the color defined in the stylesheet.

html

 <div class="badassColorChangingLogo"> <img src="http://i39.tinypic.com/15s97vd.png" /> Or download the image and change the path to the downloaded image in your machine </div> 

css

 div.badassColorChangingLogo{ background-color:white; } div.badassColorChangingLogo:hover{ background-color:blue; } 

Keep in mind that this does not work with non-alpha browsers such as ie6 and ie7. for example, you can use js fix. Google ddbelated png fix and you can get the script.

Answer 6

Use the background-color property instead of the background property in your CSS. So your code will look like this:
.fb-icon:hover {
background: blue;
}