The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Black and White image fade.

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #37574

    Hey Guys,

    First post:] First off, love 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??




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


    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:


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


    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


    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:

    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)
  • The forum ‘CSS’ is closed to new topics and replies.