2

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

General Grievance
  • 4,555
  • 31
  • 31
  • 45
owenmelbz
  • 6,180
  • 16
  • 63
  • 113
  • you could do it with several things... You could see [jquery scale](http://docs.jquery.com/UI/Effects/Scale) or use [css3 transitions](http://www.w3schools.com/css3/css3_transitions.asp) or you can use a library like the [answer from Oscar](https://stackoverflow.com/a/9873185/687338) – Frederiek Mar 26 '12 at 13:40
  • This maybe? http://net.tutsplus.com/tutorials/javascript-ajax/jquery-os-x-style-dock-and-stack-navigation/ – Oscar Broman Mar 26 '12 at 13:37

1 Answers1

0

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

Surreal Dreams
  • 26,055
  • 3
  • 46
  • 61