Gradual Image Resizing on Mouse Rollover

or, How To Do Google X Type Image Rollover Effects

Mouse over any of the graphics below (or the photo) to see an example of the images gradually getting larger or smaller, much like the GoogleX demo or the icons on the icon dock bar of a Mac OS X machine. An explanation of how this works is at the bottom of the page.


I never even thought of doing something like this until I saw a demo of the Google X page (which has since been pulled -- see this entry on for details and a look at what the page looked like). It's actually a pretty easy effect to pull off. See the JavaScript code on this page source for details.

Some notes about the implementation you see here:

Julian Robichaux
more JavaScript tips at