Demó:

• Google Plus
• Twitter
• Dribbble
• Facebook
• LinkedIn
• Forrst

HTML kód:

<ul class="tt-wrapper">

<li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li>

<li><a class="tt-twitter" href="#"><span>Twitter</span></a></li>

<li><a class="tt-dribbble" href="#"><span>Dribbble</span></a></li>

<li><a class="tt-facebook" href="#"><span>Facebook</span></a></li>

<li><a class="tt-linkedin" href="#"><span>LinkedIn</span></a></li>

<li><a class="tt-forrst" href="#"><span>Forrst</span></a></li>

</ul>

CSS kód:

<style>

.tt-wrapper{

padding: 0;

width: 435px;

height: 70px;

margin: 80px auto 30px auto;

}

.tt-wrapper li{

float: left;

}

.tt-wrapper li a{

    display: block;

    width: 68px;

    height: 70px;

    margin: 0 2px;

    outline: none;

position: relative;

z-index: 2;

    background: transparent url(//fuckinway.gportal.hu/portal/fuckinway/image/gallery/1379083103_85.png) no-repeat top left;

    text-indent: -9000px;

}

.tt-wrapper li .tt-gplus{

    background-position: 0px 0px;

}

.tt-wrapper li .tt-twitter{

    background-position: -68px 0px;

}

.tt-wrapper li .tt-dribbble{

    background-position: -136px 0px;

}

.tt-wrapper li .tt-facebook{

    background-position: -204px 0px;

}

.tt-wrapper li .tt-linkedin{

    background-position: -272px 0px;

}

.tt-wrapper li .tt-forrst{

    background-position: -340px 0px;

}

.tt-wrapper li a span{

width: 80px;

height: 80px;

line-height: 80px;

padding: 10px;

left: 50%;

margin-left: -55px;

font-family: 'Alegreya SC', Georgia, serif;

font-weight: 400;

font-style: italic;

font-size: 14px;

color: #719DAB;

text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);

text-align: center;

border: 5px solid #fff;

background: rgba(255,255,255,0.5);

text-indent: 0px;

position: absolute;

pointer-events: none;

border-radius: 50%;

bottom: -40px;

opacity: 0;

box-shadow: 0px 3px 8px rgba(0,0,0,0.1);

-webkit-transform: scale(0.2);

-moz-transform: scale(0.2);

-o-transform: scale(0.2);

-ms-transform: scale(0.2);

transform: scale(0.2);

-webkit-transition: all 0.3s ease-in-out;

-moz-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

-ms-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

}

.tt-wrapper li a:hover span{

opacity: 0.9;

bottom: 50px;

-webkit-transform: scale(1);

-moz-transform: scale(1);

-o-transform: scale(1);

-ms-transform: scale(1);

transform: scale(1);

}

</style>