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="#" title="ZURB"><img src="/playground/osx-dock/zurb-icon.png" /></a>
- </li>
- <li>
- <span>LinkedIn</span>
- <a href="#" title="LinkedIn"><img src="/playground/osx-dock/linkedin-icon.png" /></a>
- </li>