Important. If the demo isn't working, you're likely trying to view it locally (i.e. file://) and in Chrome. Due to due to Chrome's Cross Origin policy in regards to canvas, you'll have to view it through a web server (e.g. localhost). You could also just pull it up in Firefox, Internet Explorer, or view it online at http://www.stationfour.com/modernizr-demo/. If you have any question feel free to get in touch at olberding@stationfour.com.
Using Modernizr's detection library and Modernizr.load the page tests if the current browser is a) not a touch enabled device and b) supports canvas. If both conditions are true 'fancy-hover.js' is loaded and initialized. fancy-hover.js uses jquery to slide each person's name and title in and out on have and uses canvas to dynamically create a grayscale version of each image. When the user hover overs one of the images, the grayscale versions of the other images are displayed.
If the page is pulled up in an older browser that doesn't support canvas (e.g. IE7) or a touch-enabled device (e.g. iPhone), each image's caption is displayed and there are no hover effects.
Alternatively, I could use a polyfil such as excanvas.js for older browsers that do not support canvas natively.