If you do enough web browsing, you must have seen dull images that spring to colored life when you take your mouse over them. Earlier this trick was played using two versions of the same image –one colored and the other one color saturated (i.e. grayscale). Then using background positioning on mouse over different images used to be displayed. But now you don’t need to create two versions of the image because you can use the colored version and turn it grayscale on-the-fly. SEE ALSO: I recently published about adding mic icon in the Input Box and Textarea Most of the major web browsers now support grayscaling with CSS –albeit in different ways. Internet Explorer 10 and above support this feature only with SVG images. Here is the CSS code you can use to do cross-browser grayscaling of colored images. As you can WebKit browsers (like Chrome, and Safari) make it the easiest to take the colors away from a colored picture. Firefox is such a good browser but unfortunately it binds the web developers to this ugly looking code. Anyway, we can hope for betterment and in the meanwhile the above code will do the trick for you. And yes, setting grayscale to 0% in filter properties will bring the colors back. You can use this setting on mouse roll-over to create a nice effect. Let me know how you liked it and if you face any trouble or find a better solution -don’t forget to comment and share it with me! Cheers! Comment * Name * Email * Website
Δ
