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 / friends (not pros).
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
Image Galleries
