Pure CSS Fish Eye Menu Demo

Advanced CSS technique on styling a list of images with caption to make a fish eye menu.

The fish eye effect on the following examples where icon images next to the active item are slightly expanded, will only work on browsers with active support for adjacent sibling "+" selector. See the tutorial for browser support.

Expand-Down Fish Eye Menu

Expands icon image downwards when mouse pointer is over it. See the HTML+CSS code for expand-down with explanations.

Expand-Up Fish Eye Menu

A type of fish eye menu which expands icon image upwards on mouse hover. See the HTML+CSS code for expand-up.