Recreating the Mac-OS-X Dock

Jan 16, 2013

Recreating Dock in Mac OS X

In this demo, I recreated the Dock in Mac OS X with its magnifying effect using CSS3.

Features and Usage

  • When the user hovers over the dock, icons within the dock will be magnified, just like they are in the Mac OS X.
  • When the user moves the mouse within the dock, the sizes of the magnified icons will change according to the mouse position.
  • When the user moves out of the dock, the icons will be restored to their original sizes.
  • In Demo1 and Demo2, icons created using webfonts will be magnified. In Demo3, icons of PNG files will be magnifed.
  • Icons can be linked to other webpages. Each icon can have its own tip.
Recreating Dock in Mac OS X

Known Issues

  • If the user hovers over the dock while moving the mouse, there may be a sudden change in transition.


  • This demo works in Safari, Chrome, Firefox, IE10 and Opera.
  • It is recommended to view this demo in Safari or Chrome.
  • The copyrights of the icons used in this demo belong to Apple.

Leave a Reply