I’m having a bit of a quandry on a CSS experiment that I’ve been attempting. The idea behind this experiment is to create an unordered list of links scale according to your hover position, like the icons work in the Mac OS X Dock, using the magnification effect.

I know that there are Javascript ways of getting this done, but I prefer to use CSS to accomplish as much as possible, and because it is more fun for me.

The idea, is incredibly simple, using CSS2, but has problems. I’ll explain the method of how I would accomplish this before I feed you my warnings.

Making it Go

Accomplishing this actually seems pretty simple. First, I state the default size for the text in a list-item. Then I declare the hover-state font-size. After that, I use two sets of sibling selectors to give the next two list-items slightly larger font-sizes than the default, but smaller than the hover.

li { font-size: 1em; }
li:hover { font-size: 2.5em; }
li:hover + li { font-size: 2em; }
li:hover + li + li { font-size: 1.5em; }

Problems

So this technically should work, but of course it has a few problems. The first problem is that CSS does not allow you to pseudo select siblings that precede an element. Why the heck not?

The second problem(s) is that it only seems to work in Mozilla-based browsers. Internet Explorer 6 is out of question because it doesn’t handle the :hover state on anything but tags or sibling selectors (li + li). Surprisingly, Safari will not accept these selectors correctly, either. The sibling selectors do not work unless you move your mouse vertically from bottom to top of the list, but even then, they stay the size from the first sibling selector, and don’t return to their original size.

Please test the Navigation Magnification Example in your browsers.

Please let me know if you improve upon this little experiment. I will work on it in the future, if more browsers than just those that are Mozilla-based show some promise.

For some time now, I have wanted a way to reverse the order of an ordered list in html. I really wonder why it isn’t built into the specifications. While it is not entirely useful to have, it creates for an interesting experiment when you have goals of it being cross-browser and scalable text compatible.