AMC Gremlin Ads

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.

AMC Gremlin Car

AMC Gremlin Car

See more

Demos: Grayscale Hover Effect with HTML5 canvas and jQuery

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

Grayscale Hover Effect with HTML5 canvas and jquery

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

Screenshot of code example grayscale html5 canvas effect

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.