Ways to make image hover

Question

I have this image and I want to make it white by default and cyan by hover. Is there another way than to make 2 images, one white and one cyan?

enter image description here

If it has transparency (.png), then you could use `background-color` to it. Otherwise, it should be 2 images. — Siyah, Jun 21 '14 at 08:50
Very nice idea, @Siyah. I'll go with that if there's no better way. — George Irimiciuc, Jun 21 '14 at 08:52
http://stackoverflow.com/questions/7415872/change-color-of-png-image-via-css might be of help. — John, Jun 21 '14 at 08:56
@NullPoiиteя what do you mean change `position` on hover..? — T J, Jun 21 '14 at 09:20

score 1 · Accepted Answer · answered Jun 21 '14 at 08:58

1

You can make a PNG where the magnifying glass is transparent, then set the background color on the img tag in CSS:

img {
  background: steelblue;
}

img:hover {
  background: skyblue;
}

Demo: http://jsbin.com/jeqihuxo/2/edit

answered Jun 21 '14 at 08:58

Patrick Oscity

51,870
16
134
161

score 1 · Answer 2 · answered Jun 21 '14 at 09:54

Another way is to use sprites. Well, technically would not be two seperate images but one image which background-position is changed on hover. Your image is 36x48, so make a new image 72x48 with the non-hover version on the left side and the hover version on the right and move the background on hover.

Ways to make image hover

2 Answers2