Menu Dock – Solo Con CSS

*{margin:0;padding:0;border:0;outline:0;}a{ text-decoration:none;}
.all{margin:20px auto;width:900px;text-align:center;font-family:"Century Gothic";position:relative;}
.dock{ display:block; margin-top:50px;}
.dock li {display:inline-block;}
.dock img {width:86px; opacity: 0.7; -webkit-transition: all 1s ease-in; }
.dock span {position:absolute;top:40px;left:0;opacity:0;-webkit-transition:all 1s ease-out;width:100px;}
.dock li a:hover img, .dock li a:hover span{width:114px;opacity:1; margin-top:20px; vertical-align: bottom;}
.dock li a:hover span{left:45%;}

<div class="all">
	<h1>Menu Dock MacOS solo con CSS Animations</h1>
    <ul class="dock">
        <li><a href="#"><img src="z.jpg" alt="Imagen" /><span>Z - Letra zeta</span></a></li>
        <li><a href="#"><img src="a.jpg" alt="Imagen" /><span>A - Letra a</span></a></li>
        <li><a href="#"><img src="c.jpg" alt="Imagen" /><span>C - Letra ce</span></a></li>
        <li><a href="#"><img src="s.jpg" alt="Imagen" /><span>S - Letra ese</span></a></li>
        <li><a href="#"><img src="s.jpg" alt="Imagen" /><span>S - Letra ese</span></a></li>            
    </ul>
</div>