jQuery Enlarge on mouse over

Question

I'm trying to mimic a similar effect to how when you scroll across the OSX icon dock it enlarges the images,

I've got this markup.

<ul class="float-left">
<li class="head"></li>
<li></li>
<li></li>
<li></li>
</ul>

<ul class="float-left">
<li class="head"></li>
<li></li>
<li></li>
<li></li>
</ul>

<ul class="float-left">
<li class="head"></li>
<li></li>
<li></li>
<li></li>
</ul>

<ul class="float-left">
<li class="head"></li>
<li></li>
<li></li>
<li></li>
</ul>

By default they are all set at 200px wide and 14px font size.

I'd like it so as you mouseover one of the UL's it animates it to enlarge its width and text size by about 20%, then as you mouseleave it goes back to its original position.

however I've no idea what to call it, I've searched for coverflow, magnify effects anything i can think of, and im unable to find a pre-build plugin to do this, does anybody know where to find one or knock one up quick?

thanks

Answer 1

This maybe?

http://net.tutsplus.com/tutorials/javascript-ajax/jquery-os-x-style-dock-and-stack-navigation/

Answer 2

you could do it with several things... You could see jquery scale or use css3 transitions or you can use a library like the answer from Oscar

Answer 3

This article has a plugin and how to set it up. I think people refer to this as the OSX Dock effect.

http://ndesign-studio.com/blog/css-dock-menu