Recreating the OS X Dock

The CSS

1. ul.osx-dock li a {
2. display: block;
3. height: 50px;
4. padding: 0 1px;
5. margin: 0;
6. -webkit-transition: 0.15s linear;
7. -webkit-transition-property: -webkit-transform margin;
8. -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)));
9. }
10.  
11. ul.osx-dock li a img {
12. width: 48px;
13. }
14.  
15. ul.osx-dock li:hover {
16. margin-left: 9px; margin-right: 9px;
17. z-index: 200;
18. }
19.  
20. ul.osx-dock li:hover a {
21. -webkit-transform-origin: center bottom;
22. -webkit-transform: scale(1.5);
23. }
24.  
25. ul.osx-dock li.nearby {
26. margin-left: 6px; margin-right: 6px;
27. z-index: 100;
28. }
29.  
30. ul.osx-dock li.nearby a {
31. -webkit-transform-origin: center bottom;
32. -webkit-transform: scale(1.25);
33. }
34.  
35. ul.osx-dock li span {
36. background: rgba(0,0,0,0.75);
37. position: absolute;
38. bottom: 80px;
39. margin: 0 auto;
40. display: none;
41. width: auto;
42. font-size: 11px;
43. font-weight: bold;
44. padding: 3px 6px;
45. -webkit-border-radius: 6px;
46. color: #fff;
47. }
48. ul.osx-dock li:hover span {
49. display: block;
50. }