CODEWITHSUNDEEP
htmlcssimagehovereffect
andy
andy

Reputation: 269

How to change an image color with hover effect (CSS)?

I'm trying to set a hover effect over an image, so that it changes color when the mouse is over it. That's my html:

  <div class="col s4">
  <ul id="social">
  <li id="fb"></li>
  <li id="tw"></li>
  <li id="em"></li>
  <li id="fa"></li>
  </ul>
  </div>

And that's my CSS:

ul#social li#fb {
    height:32px;
    width:32px;
    background-image:url(../img/social/Facebook-icon-(1).png);
}

ul#social li#fb:hover{
    background-image:url(../img/social/Facebook-icon.png);
}

[...]

The first background-image is in black and white , the second is in color . Unfortunately , however , my code does not work: it does not display the image in black and white. If imposed as background-image the color image I can see it properly, but the hover effect will not work anyway.

Where am I wrong?

Upvotes: 1

Views: 3474

Answers (1)

lucasnadalutti
lucasnadalutti

Reputation: 5948

The problem is not in :hover, so it's probably in your image path.

I pasted your code in this fiddle, only changing background-image to background-color and you can see that it changes from red to green when your mouse is over it.

Upvotes: 2

Related Questions