I decided to take it one step beyond and utilize CSS 3′s transform properties, resulting in my own Fisheye demo.

I cut out much of Gabriele’s code that handled the zooming and replaced it with Folgers Crystals transition and transform. (Although I kept pretty much everything else she built, including her icons. Thank you Gabriele for the inspiration.)

Specifically, on the navigation anchors we have transition: all .1s ease-in-out. In a nutshell, this says, “All transitions should take .1 seconds to complete and they should do it smoothly.” We also have transform-origin: 50% 0 which moves the center of action to the center top of the anchor box.

It isn’t until we get to the hover/active/focus states that things happen. Here we have transform: scale(1.5), which you’ve no doubt already concluded causes the element to grow by a factor of 1.5. An important thing to note about this, the transform is applied to the anchor element and therefore affect everything inside that anchor, be it a background image, text or foreground image.

Of course it isn’t quite that simple. Because this part of CSS 3 is under development, we need to utilize various vender prefixes. So to see it actually work you’ll need to add -moz-, -webkit- and -o- to the front of all the transform properties. Not surprising there is not support for Internet Explorer, but that’s OK, it doesn’t matter. Anyone using IE won’t know what they are missing. Go see for yourself.

And look for the Easter Egg… .