It uses an anchor link for the effect, because that is the only thing that Internet Explorer allows the :hover psuedo-class to work with. While my example page only has # linked to, this could easily be pointed to a full version of the respective images, or a website if you decide to use it for a design portfolio. For now, it uses photos taken by family and friends.

I decided to call it Hoverbox, because after showing it to Dustin, he said it was like a mini Lightbox. While my example is nowhere near as cool as those, it does have the same principle in mind, popping up an image without affecting a page’s layout. Being that it’s triggered by a mouse a:hover, the silly name was born. I also like the fact Hoverbox works with JavaScript disabled.

It has been tested in the current builds of all the latest major browsers and works in Camino, Firefox, IE6, Opera and Safari. So, I’m assuming it works in most Gecko based engines. The effect itself even works in IE5.5, but I haven’t bothered to support it because serveral years is ample time for users to have upgraded to version 6. With all that out of the way, here’s how it works…

The magic happens on a:hover, when .preview in the link goes from having display: none; to display: block; with absolute positioning and negative values for top and left. In good browsers, it is positioned according to the containing li, which is set to display: relative, but in Internet Explorer 6 + 7, conditional comments place the positioning on the containing a href.

Due to the differences in border / padding on the li, the offset in pixels is overridden for IE6. This corrects for the smaller dimenions of the link, equal to the total width the img plus its border and padding. I tried just using -50% for both top and left, but Opera seemed to choke on the percentage values.

To save on loading time, I am only using one image for both the thumbnail and the roll-over preview, but you could just as easily have separate files for each instance, if you so desire. It just depends if the graininess of forced constraints on dimensions bothers you or not. The reason I load each image twice, instead of just increasing the size of a single image on roll-over is due to the inconsistent shifts this causes in the page layout. So, while there is minor redunancy, it beats having to pre-cache the images with JavaScript.