Greyscale to colour on hover - Best method

Hi,

Would like to have this effect on one of my pages.

Have tried using this tut:

HTML5 Grayscale Image Hover

But getting mixed results on my MAMP setup. i.e. Firefox and Chrome not showing at all. Safari only shows the colour image on hover.

There is a note suggesting this may be the case in a local set up - why would this be the case? I'm kinda weary rolling it out live only to find it's still not working.


Is there a better method/tut that anyone could suggest/post?

Grateful for any replies.

Rob

Make sure images are located on same host where you are loading page from. Canvas can't be used to manipulate images loaded from other servers, its one of security features.

Thanks Cyber.

So there is a good chance this should work once I put it live?

Will give it a go and see what happens then.


Cheers

Copy all images to your local installation and test it instead of loading images from live server. If it won't work, it won't work on live ether.

Hi,

Yep tried that and no joy. Seems quite a few have had trouble with this script so will try a different method to get the effect.

Could anyone point me to a working example/tutorial to work on?

Thanks