Grow your CSS skills. Land your dream job.

CSS Black and White image fade.

  • # April 10, 2012 at 3:20 pm

    Hey Guys,

    First post:] First off, love css-trick.com we are very lucky to have this great resource. Goodman Chris!

    I am building a home page that has a big spinner, and some some thumbnails under it. I want the thumbnails to be black and white on rollover they go color.

    I have been seeing more and more sites with black and white images then you rollover them for color. Is there a simple way to achive this with a css filter??

    Thanks!

    Rp

    # April 10, 2012 at 3:50 pm

    Not that I’m aware of. jQuery is the solution.

    # April 10, 2012 at 4:10 pm

    yep, unfortunately christopher is right. there are some solutions to this on the horizon but nothing easy that works cross browser yet.

    this tutorial might be helpful to you: http://webdesignerwall.com/tutorials/html5-grayscale-image-hover

    # April 11, 2012 at 12:20 am

    Thanks guys!! I will take a look at the link and see what I can put together.

    # November 28, 2012 at 2:14 pm

    The CSS filter property should work for you:

    http://demosthenes.info/blog/532/Convert-Images-To-Black-And-White-With-CSS

    # December 9, 2012 at 5:16 am

    If you are looking for the easiest css-proof way. You could create the grayscale of your image in Photoshop, and simply absolutely position both the color image and the greyscale image on top of another. Then display: block one image and display: none the other , depending on which one you wanted to see when you hovered. And then add a fade for a nice transition…. I believe this would work, could be completely wrong though

    # March 19, 2013 at 8:49 pm

    You can do it in PHP and you’re guaranteed cross-browser support. If you have a lot of images, or the image is really big then it might slow down the page load a bit but in my eyes it’s worth the outcome. I really hate dealing with browser issues when I dont need to. There are a few tutorials out there but this one worked for me quickly: http://php.about.com/od/gdlibrary/ss/grayscale_gd.htm

    EDIT: Crap I just realized you wanted it to work on roll-over. Well, I guess you could use the css hover property with the php idea above as the second image. It would be like swatting a fly with an anvil but you’ll know it will always work.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".