Changing image color on hover without having to change the image

Question

This question is pretty basic, but I want to be sure there isn't an alternative method than what I currently do. Let's say I have a Facebook icon. As of now, when a user hovers over that image, I display a different image in order to change the color. Is there an alternative CSS method to doing this, so I am not using multiple images?

In the fiddle below, I tried changing the background, but that just covers the entire image.

.social-icon {
    width: 20px;
    height: 20px;
    transition: ease .3s;
    -webkit-transition: ease .3s;
    margin-right: 5px;
    cursor: pointer;
}
#facebook-icon {
    background-image: url(https://s3.us-east-2.amazonaws.com/optimumdesigns/facebook-logo-gray.png);
    background-size: 20px 20px;
}
#facebook-icon:hover {
  background: #FFF;
}

<div class="social-icon" id="facebook-icon"></div>

jsFiddle

You could think of using a SVG image and change the node colours. — Praveen Kumar Purushothaman, Nov 14 '17 at 04:19
@PraveenKumar Just tried this approach, but can't get it to work. https://jsfiddle.net/n1vn8bho/7/ — Paul, Nov 14 '17 at 04:39
see this : https://stackoverflow.com/questions/7273927/image-greyscale-with-css-re-color-on-mouse-over — Balwant, Nov 14 '17 at 04:45
@Balwant Adding a grayscale doesn't really help with my issue though. If I am able to apply normal color changes with a filter that would work though. — Paul, Nov 14 '17 at 04:50
What if you were to use the other colored image as the source and then grayscale it when not hovered? — Kevin, Nov 14 '17 at 04:53
@Kevin I'm not wanting the image to be gray at any point though. Thanks. — Paul, Nov 14 '17 at 04:59

Kevin · Answer 1 · 2017-11-14T04:40:49.810

0

If you use the Font Awesome Facebook icon, you can change of the color of it in the CSS that way.

#facebook-icon {
  color: grey;
}

#facebook-icon:hover {
  color: blue;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="social-icon" id="facebook-icon"><i class="fa fa-facebook"></i></div>

edited Nov 14 '17 at 04:40

answered Nov 14 '17 at 04:26

Kevin

352
2
4
13

Thanks for the suggestion. I am looking to do this in an efficient manner (not having to make an external request). – Paul Nov 14 '17 at 05:17

score 0 · Answer 2 · edited Nov 14 '17 at 04:55

0

Try this:

#facebook-icon:hover {
    background-color: blue;
    background-image: url(https://s3.us-east-2.amazonaws.com/optimumdesigns/facebook-logo-gray.png);  
}

.social-icon {
    width: 20px;
    height: 20px;
    transition: ease .3s;
    -webkit-transition: ease .3s;        
    margin-right: 5px;
    cursor: pointer;
}

#facebook-icon {
    background-image: url(https://s3.us-east-2.amazonaws.com/optimumdesigns/facebook-logo-gray.png);
    background-size: 20px 20px;
}

#facebook-icon:hover {
    background-color: blue;
    background-image: url(https://s3.us-east-2.amazonaws.com/optimumdesigns/facebook-logo-gray.png);  
}

<div class="social-icon" id="facebook-icon"></div>

edited Nov 14 '17 at 04:55

Kevin

352
2
4
13

answered Nov 14 '17 at 04:36

Regis

55
6

It seems it was an overwriting issue. – Regis Nov 14 '17 at 04:38
I put your code into a snippet, but I'm not exactly sure it's the effect they're going for. – Kevin Nov 14 '17 at 04:50

Changing image color on hover without having to change the image

2 Answers2