treehouse : what would you like to learn today?
Web Design Web Development iOS Development

How to create black and white to colorized images on hover?

  • Hello!

    I want to have some images that change from black and white to colorized version on hover and work cross browser (in ie too).

    How can I do that?

    Alireza.M

  • Cross-browser?

    I don't think that can be some with a single CSS property right now with any depth of support.

    I think the greyscale filter property will work for webkit browsers (and perhaps FF) but other than that, I don't think so.

    There are workarounds (image swapping etc) but that's not what you are after, I assume?

  • There you go: http://jsfiddle.net/KDtAX/487/

    Compatible IE 6-10 and other browsers with CSS filters and SVG.