Создание док-станции на чистом CSS

Поиграв с CSS 3, у меня возникла безумная идея сделать с ним док-станцию ​​в стиле OS X (контейнер DIV с элементами внутри него, которые, используя подкласс CSS: hover, увеличиваются в размере при наведении курсора мыши). ). Однако при его реализации я сталкиваюсь с некоторыми странными эффектами. Пока что это то, что я пробовал:

Код

Моя тестовая страница находится по адресу http://s.supuhstar.operaunite.com/s/content/testAnims.htm (умерла с Opera Unite), если вы хотите увидеть то, что у меня есть.

Отсутствующие функции

Неожиданные эффекты включают:

• Невозможность разместить элемент dock в нижней части dockHolder элемент
• dockItem элемент не расширяется по ширине вместе со своим дочерним изображением
• dockItem и элементы dock не будут центрироваться внутри контейнера dockHolder с CSS (пробовал margin: auto ; , box-pack: center; , box-align: center; и т. Д.); работает только HTML-тег
• В Opera и Firefox (я отказался от IE), dockItem очень широки

Предполагаемые эффекты которые отсутствуют, включают:

• dockItem остаются в пределах элемента dock до изменения размера, после чего они увеличиваются пропорционально размеру элемента dockHolder , но элемент dock остается того же размера
• Элемент dock постоянно достаточно широк, чтобы вместить все элементы dockItem внутри него, и никогда не шире и не короче общая ширина всех dockItem s и их полей.

Вопрос

Есть ли у кого-нибудь решение, которое исправит неожиданные эффекты и / или реализует отсутствующие запланированные эффекты?

Окончательная реализация

Ниже приведен код моего окончательного решения:

Рабочий пример (может пойти устарело): http://admin.s.supuhstar.operaunite.com/s/content/testDock.html (умер с Opera Unite)