Css Dock menu

Merhaba Arkadaşlar ,

Bu seferki yazımda css ile dock menu nasıl yapılır  kısa bir kod örneği ile göstermeye çalışacağım. Bir çoğumuz görmüşüzdür ve nasıl yapıldığını merak etmişizdir. Şimdi kodlara geçelim.

CSS:

  #dock-container {

         

            text-align: center;

            right: 20%;

            left: 20%;

            width: 100%;

            border-radius: 10px 10px 0 0;

        }

   #dock-container li {

            list-style-type: none;

            position: relative;

            margin-bottom:40px;

       

           

        }

            

            

  #dock-container li img {

          width: 32px;

          height: 32px;

          -webkit-box-reflect: below 2px

                    -webkit-gradient(linear, left top, left bottom, from(transparent),

                    color-stop(0.7, transparent), to(rgba(255,255,255,.5)));

          -webkit-transition: all 0.3s;

          -webkit-transform-origin: 50% 100%;

        }

              #dock-container li:hover img {

          -webkit-transform: scale(2);

          margin: 0 2em;

        }

        #dock-container li:hover + li img,

        #dock-container li.prev img {

          -webkit-transform: scale(1.5);

          margin: 0 1.5em;

        }

            

              #dock-container li span {

            display: none;

            position: absolute;

            bottom: 140px;

            left: 0;

            width: 100%;

            background-color: rgba(0,0,0,0.75);

            padding: 4px 0;

            border-radius: 12px;

        }

        #dock-container li:hover span {

            float :left;

            display: block;

            color: #fff;

        }

HTML KODLARI:

<div style="width:10%;float:left;" id="leftMenu">

                <div id="dock-container">

                     <div id="dock">

                       <ul>

                          <li style="margin-top:25px">

                            <span>Ana Sayfa</span>

                            <a href="#"> <img class="img-responsive img-rounded" src="Content/SiteMaster/images/dockmenu/CashBox.jpg" /></a>

                          </li>

                          <li>

                            <span>iletişim</span>

                            <a href="#"><img class="img-responsive img-rounded"  src="Content/SiteMaster/images/dockmenu/Communication.jpg" /></a>

                          </li>

                          <li>

                             <span>Hakkımızda</span>

                             <a href="#"><img class="img-responsive img-rounded"  src="Content/SiteMaster/images/dockmenu/Current.jpg" /></a>

                          </li>

                          <li>

                             <span>Makaleler</span>

                             <a href="#"> <img class="img-responsive img-rounded"  src="Content/SiteMaster/images/dockmenu/DailyProcessCheck.jpg" /></a>

                          </li>

                            <li>

                             <span>G+</span>

                             <a href="#"> <img class="img-responsive img-rounded"  src="Content/SiteMaster/images/dockmenu/Invoice.jpg" /></a>

                          </li>

                            <li>

                             <span>Facebook</span>

                             <a href="#"> <img class="img-responsive img-rounded"  src="Content/SiteMaster/images/dockmenu/Order.jpg" /></a>

                          </li>

                           

                           

                       </ul>

                     </div>

                    </div>

              </div>

EKRAN GÖRÜNTÜSÜ:

Kolay Gelsin..