Icon Dock на CSS3

Icon Dock панель из иконок на чистом CSS. При наведении мышки на иконку происходит её увеличение.

HTML

<div class="dock">
    <ul>
        <!-- the fillers are needed to pad out the left side (as we have two nodes on both sides of the hovered node rising a little) -->
        <li class="filler"></li><li class="filler"></li><!--
        --><li><a href="#"><span>Компьютер</span><img src="img/1.png" alt="[1]" /></li><!--
        --><li><a href="#"><span>Мессенджер</span><img src="img/2.png" alt="[2]" /></li><!--
        --><li><a href="#"><span>Видеоплеер</span><img src="img/3.png" alt="[3]" /></a></li><!--
        --><li><a href="#"><span>Firefox</span><img src="img/4.png" alt="[4]" /></a></li><!--
        --><li><a href="#"><span>Музыка</span><img src="img/5.png" alt="[5]" /></a></li><!-- -->
        <li><a href="#"><span>Настройки</span><img src="img/6.png" alt="[6]" /></a></li>
        <li class="seperator"></li><!--
        --><li><a href="#"><span>Медиа</span><img src="img/7.png" alt="[7]" /></a></li><!--
        --><li><a href="#"><span>Видео</span><img src="img/8.png" alt="[8]" /></a></li><!--
        --><li><a href="#"><span>Документы</span><img src="img/9.png" alt="[8]" /></a></li><!--
        --><li><a href="#"><span>Корзина</span><img src="img/10.png" alt="[8]" /></a></li>
    </ul>
</div>

CSS

.dock {
    text-align: center;
    display: block;
    width: 100%;
    margin: 0px;
    padding: 0px;
    line-height: 0px;
}

.dock ul {
    margin: 0px 0px;
    padding: 0px;
    list-style: none;
    display: inline-block;
    vertical-align: bottom;
    white-space: nowrap;
    overflow: hidden;
    margin-left: -96px;
    padding-top: 1.3em;
    height: 128px;
    line-height: 128px;
}

.dock li {
    text-align: center;
    display: inline-block;
    vertical-align: bottom;
    position: relative;
    height: 48px;
    line-height: 0px;
    width: 48px;
    text-align: right;
    margin-right: -228px;
    padding-right: 228px;
    cursor: pointer;
    
    transition: width 0.1s, height 0.1s;
    -moz-transition: width 0.1s, height 0.1s;
    -webkit-transition: width 0.1s, height 0.1s;
    -o-transition: width 0.1s, height 0.1s;
}

.dock li:nth-child(1) { z-index: 300; }
.dock li:nth-child(2) { z-index: 299; }
.dock li:nth-child(3) { z-index: 298; }
.dock li:nth-child(4) { z-index: 297; }
.dock li:nth-child(5) { z-index: 296; }
.dock li:nth-child(6) { z-index: 295; }
.dock li:nth-child(7) { z-index: 294; }
.dock li:nth-child(8) { z-index: 293; }
.dock li:nth-child(9) { z-index: 292; }
.dock li:nth-child(10) { z-index: 291; }
.dock li:nth-child(11) { z-index: 290; }
.dock li:nth-child(12) { z-index: 289; }

.dock li:hover, .dock li:hover + li + li + li + li { width: 72px; height: 72px; }
.dock li:hover + li, .dock li:hover + li + li + li { width: 100px; height: 100px; }
.dock li:hover + li + li { width: 128px; height: 128px; }

.dock li a {
    position: relative;
    display: block;
    text-decoration: none;
    text-align: left;
    color: black;
    width: 100%;
    height: 100%;
}

.dock li a span {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 1.3em;
    line-height: 1.3em;
    color: white;
    bottom: 100%;
    display: block;
    opacity: 0.0;
    
    transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
}

.dock li:hover + li +li a span {
    display: block;
    opacity: 1.0;
}

.dock li a img {
    height: 100%;
    width: 100%;
}