Hoverbox Image Gallery
I recently finished reading CSS Mastery, and think I’ve finally got a good understanding of how absolute and relative positioning (fail to) work in Internet Explorer. I have been tinkering with this bit of code since yesterday afternoon, helping out a designer friend with his client’s site. However, we decided to go a slightly different route for their gallery. So, I pass it on to you with the hope that it proves useful. Basically, it’s a super light-weight (8kb) roll-over photo gallery that uses nothing but CSS…
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.
Note: The code for Hoverbox is free to use. Do with it whatever you want in your own projects. I just ask that you not redistribute the code via template sharing repositories, because I occasionally make updates to ensure multiple browser compatibility. If you do want to spread the word, simply link to this page so that people are always getting the most updated version.
This article has been translated to Belorussian by Patricia Clausnitzer.
This article has been translated to Hungarian by Atilla Debredeni.