My problem with hover from black and white to color, I used button according to Eldar’s explanation. But I don’t get the ratio of the image right on every device. (iPad,iPhone, desktop,…)
http://www.knol.webgraphic.be/test2/
This is OK with the first block, are just images, but not with the block below. (button)
If you have any tips, they are always welcome!
Thanks erik
You will need to add some padding since its a background image.
As an alternative to using two images, I personally would use CSS to change the image to greyscale.
For example placing the below code in your page header, and applying the class to the image will make the image grey and coloured on hover.
<style>
.myimage {filter: grayscale(100%);}
.myimage:hover {filter: grayscale(0);}
</style>if you wanted to soften the transition you can amend the top one with this
.myimage {filter: grayscale(100%); transition: all 0.4s;}Hi @PeteSharp, and presumably if you wanted it to start coloured and greyscale on hover you just swap over the commands?
This is a great one - I think it’s just what I need for an upcoming job, so thanks @eriks, you timed this one beautifully!
Yep, thats the one. Also change the Class name to suit.
Also if you need to change the cursor to a pointer (depends on what your building) add this to the class with the hover.
cursor: pointer;Super!!! @PeteSharp Thank you very much!
It’s works great, just what i want.
http://www.knol.webgraphic.be/test2/
Just the “onderwijs” image isn’t as black as the other two?
@TrevReav that’s how we help each other 
where can I find the Eldar explanation about it? tx
Hey @eriks
Try swapping grayscale for saturate. Saturate with a 0 value may look more how you want it. So the values will also need to be swapped. 0 will look grey and 100 will be normal.
I try it, but get al lots of colors 
