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??
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: 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.
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
this tutorial might be helpful to you: http://webdesignerwall.com/tutorials/html5-grayscale-image-hover
The CSS filter property should work for you:
http://demosthenes.info/blog/532/Convert-Images-To-Black-And-White-With-CSS
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: 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.