Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Mark Davidson
Mark Davidson
27,800 Points

CSS Greyscale Image Filter, Glitchy in Mozilla/IE?

I'm doing some web work for a fashion website and they want a photo-grid style page for their different designers. I'm using some CSS 3 transitions hopefully in combo with filter effects so things have a greyscale look and full-color when hovered over: http://merlinsystems.net/photogridtest/

However, after some research I've noticed that the whole greyscale filter effect has some pretty nasty compatibility issues. Everything webkit looks awesome, for FF and IE there is a method using SVGs which... is kind of weird. It works but the images are "shifty" when hovered over. Is there a specific reason for this or is that just how the effect works?

Also, to make this work on IE10 the method seen here >(http://jsfiddle.net/KatieK/qhU7d/2/) needs to be used. Is this possible to apply to multiple images on the same pagein IE10? Just wondering if anyone can give me a yes or no before I waste a few hours trying to do the impossible.

Thanks for any help!

2 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

HTML5 Please currently advises caution with CSS filters.

So I'd say you are better off going old school and converting images to grayscale via Photoshop and then using a CSS transition to change between the 2 images.

Arijit Bhattacharya
Arijit Bhattacharya
4,563 Points
Arijit Bhattacharya
Arijit Bhattacharya
4,563 Points

I had to do something similar an year ago, but my implementation involved the canvas element.

After starting out on my own, I discovered this plugin and used it instead.

I checked the plugin, it works in Chrome 27, Firefox 21 and IE9. Hopefully it will help you.

If you want to learn more about this implementation, this post may help you.