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   lt div class  fb-icon  gt   lt a href  http   www facebook com mypage  target   blank  gt   lt img src  images fb normal png  alt  Facebook  gt   lt  a gt   lt  div gt    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

User · Accepted Answer

Ideally you should use a transparent PNG with the circle in white and the background of the image transparent. Then you can set the background-color of the .fb-icon to blue on hover. So you're CSS would be:

fb-icon{
    background:none;
}

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

Additionally, if you don't want to use PNG's you can also use a sprite and alter the background position. A sprite is one large image with a collection of smaller images which can be used as a background image by changing the background position. So for eg, if your original circle image with the white background is 100px X 100px, you can increase the height of the image to 100px X 200px, so that the top half is the original image with the white background, while the lower half is the new image with the blue background. Then you set setup 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;
}

User · Answer

An alternative solution would be to use the new CSS mask image functionality which works in everything apart from IE  still not supported in IE11   This would be more versatile and maintainable than some of the other solutions suggested here  You could also more generally use SVG   e g   item   mask  url   mask-image png        There is an example of using a mask image here   http   codepen io zerostyle pen tHimv   and lots of examples here   http   codepen io yoksel full fsdbu

User · Answer

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

User · Answer

Ok  try this   Get the image with the transparent circle - http   i39 tinypic com 15s97vd png Put that image in a html element and change that element s background color via css  This way you get the logo with the circle in the color defined in the stylesheet   The html   lt div class  badassColorChangingLogo  gt       lt img src  http   i39 tinypic com 15s97vd png    gt       Or download the image and change the path to the downloaded image in your machine  lt  div gt    The css  div badassColorChangingLogo      background-color white    div badassColorChangingLogo hover      background-color blue      Keep in mind that this wont work on non-alpha capable browsers like ie6  and ie7  for ie you can use a js fix  Google ddbelated png fix and you can get the script

User · Answer

If I understand correctly then it would be easier if you gave your image a transparent background and set the background container s background-color property without having to use filters and so on   http   www ajaxblender com howto-convert-image-to-grayscale-using-javascript html  Shows you how to use filters in IE  Maybe if you leverage something from that  Not very cross-browser compatible though  Another option might be to have two images and use them as background-images  rather than img tags   swap one out after another using the  hover pseudo selector

User · Answer

It s a bit late but I came across this post   It s not perfect but here s what I do   HTML Code   lt div class  showcase-menu-social  gt  lt img class  margin-left-20  src  images graphics facebook-50x50 png  alt  facebook-50x50  width  50  height  50    gt  lt img class  margin-left-20  src  images graphics twitter-50x50 png  alt  twitter-50x50  width  50  height  50    gt  lt img class  margin-left-20  src  images graphics youtube-50x50 png  alt  youtube-50x50  width  50  height  50    gt  lt  div gt    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 matches up exactly with the image border radius   As you can see the  showcase-menu has the same background as the  showcase-menu-social   What this does is to allow the  opacity  to take effect and no  square  background or border shows  thus the image slightly reduces it s saturation on hover   It s a nice effect and does give the viewer the feedback that the image is in focus   I m fairly sure on a darker background  it would have even a better effect   The nice thing is that this is valid HTML-CSS code and will validate   To be honest  it should work on non-image elements just as good as images   Enjoy

User · Answer

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

[html] How to change the color of an image on hover

Examples related to html

Examples related to css