Recreating the OS X Dock

We take a basic list of links and turn them into an awesome OS X dock of icons.

Note: Demo works in Safari 4.x and Chrome 5.

The CSS

ul.osx-dock li a {
  display: block;
  height: 50px;
  padding: 0 1px;
  margin: 0;
  -webkit-transition: 0.15s linear;
  -webkit-transition-property: -webkit-transform margin;
  -webkit-box-reflect: below 2px; -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.45, transparent), to(rgba(255, 255, 255, 0.25)));
}

ul.osx-dock li a img {
  width: 48px;
}

ul.osx-dock li:hover {
  margin-left: 9px; margin-right: 9px;
  z-index: 200;
}

ul.osx-dock li:hover a {
  -webkit-transform-origin: center bottom;
  -webkit-transform: scale(1.5);
}

ul.osx-dock li.nearby {
  margin-left: 6px; margin-right: 6px;
  z-index: 100;
}

ul.osx-dock li.nearby a {
  -webkit-transform-origin: center bottom;
  -webkit-transform: scale(1.25);
}

ul.osx-dock li span {
 background: rgba(0,0,0,0.75);
 position: absolute;
 bottom: 80px;
 margin: 0 auto;
 display: none;
 width: auto;
 font-size: 11px;
 font-weight: bold;
 padding: 3px 6px;
 -webkit-border-radius: 6px;
 color: #fff;
}
 ul.osx-dock li:hover span {
 display: block;
}

The HTML

<ul class="osx-dock">
  <li class="active">
    <span>ZURB</span>
    <a href="http://www.zurb.com" title="ZURB"><img src="/playground/osx-dock/zurb-icon.png" /></a>
  </li>
  <li>
    <span>LinkedIn</span>
    <a href="http://www.linkedin.com" title="LinkedIn"><img src="/playground/osx-dock/linkedin-icon.png" /></a>
  </li>
</ul>