CSS Black and White image fade.
# April 10, 2012 at 3:20 pm
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??
Rp# 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# November 28, 2012 at 2:14 pm
The CSS filter property should work for you:# 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.
You must be logged in to reply to this topic.