Crate Hoverbox Menu with CSS

After seeing the Hoverbox Image Gallery developed by Nathan Smith, I thought that a similar approach would work very nicely for a menu. This would allow you to create a much larger rollover image for each menu item, overlapping the neighbouring menu items and other elements on the page. The original Hoverbox code uses two […]

After seeing the Hoverbox Image Gallery developed by Nathan Smith, I thought that a similar approach would work very nicely for a menu. This would allow you to create a much larger rollover image for each menu item, overlapping the neighbouring menu items and other elements on the page.

The original Hoverbox code uses two img elements, one for the thumbnail and one for the larger image. For a menu it's more important to avoid duplicating the links themselves, and I also wanted to control the image with CSS rather than img elements. This meant making some changes to the original Hoverbox code.