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
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
.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
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.