When I’m looking for inspiration I always check some retro ads. This time I’ve found some of a classic car the AMC Gremlin.

See more

This are some examples with code snippets for the post about Grayscale Hover Effects with HTML5 canvas and jquery.

How to use the code

• include jQuery
• add the class .imglist to the ul, ol or div that includes your images
• use the code of the first demo below
• for a different hover effect replace the jQuery hover function with another from the demos
• put the HTML file on a web server or a local test server like XAMPP (otherwise it will not work)

If you have any questions about the code, please use the commentform in the article.

See more

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.

View Demos & Codes

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.

This is a classic solem oneliner mixed with some retro playboy pictures from the 70s and some shots of Amsterdam.