- This topic is empty.
April 10, 2012 at 3:20 pm #37574rpdtwoMember
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??
RpApril 10, 2012 at 3:50 pm #100972chrisburtonParticipant
Not that I’m aware of. jQuery is the solution.April 10, 2012 at 4:10 pm #100974dfoggeParticipant
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-hoverApril 11, 2012 at 12:20 am #101003rpdtwoMember
Thanks guys!! I will take a look at the link and see what I can put together.November 28, 2012 at 2:14 pm #115837jonmittenMember
The CSS filter property should work for you:December 9, 2012 at 5:16 am #116639runninghair08Member
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 thoughMarch 19, 2013 at 8:49 pm #128874paulzmudaMember
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.
- The forum ‘CSS’ is closed to new topics and replies.