I saw a tutorial on webdesignerwall.com showing how to make a HTML5 Grayscale Image Hover and thought this is very cool. After some research I’ve found another tutorial on Nettuts+ with another function. This one was better for me to understand(video tutorial), so I combined the snippets together and reduced the jQuery code for my needs. Finally I’ve created some different hover effects.
The Future with CSS Shaders and Filter Effects
In the future there will be CSS Shaders to do something like that. For more information check out this article about CSS Filter Effects on Adobe.com.