How can I change the color of an image on hover?

Question

css

Please, tell me, sometimes I come across such a trick on sites: when you hover over a gray image, it is colored.

Here is the last example with sponsors: https://www.cybermarketing.ru/conf2015#sponsor

Once I did the opposite thing, with the help of opacity I changed the appearance of a color image. But in this case, most likely scripts are used.

I will be glad to ready-made templates.

Answer 1

https://jsfiddle.net/7w3kfrtt/

Answer 2

You can use css3, the filter property, with which you can manipulate the color of the image.
Here are examples of css3 image filters
All demos are here
Browsers that support css3 filter , unfortunately IE is stupid as always.
If you need only from black and white to color, here is a good article with sources, and here is a demo, support for IE 7+

Answer 3

img {
filter: greyscale(100%);
}
img:hover {
filter: grayscale(0);
}
Doesn't work in all browsers, so you'll have to add -moz- -ms- -webkit- -o-

Answer 4

CSS: filter, no?
UPD: I looked at the site. They just have one big image with a color and gray logo. https://www.cybermarketing.ru/images/conf2015/cm-s...
With this approach, you just need to change the background shift.

Answer 5

Open the code and take a look. In short, the above example uses a background offset on the hover event.
The image itself is a sprite.

Answer 6

I realized that they have everything done in one picture) Then it's not so interesting)
I'm more interested in how to make a finished color image black and white using css or js, but return it to its original color on hover.
UPD
Here is a slightly different solution: registratura.ru/contacts/sotrudniki

Answer 7

You can also use canvas
www.html5canvastutorials.com/advanced/html5-canvas...

Answer 8

A lot of people have already written, but still I will answer:
1. Put the picture in a class, for example, in .image-gray. And we add a filter to this class in CSS.
2. On hover (:hover) - remove this filter.
Profit)