Social media hover icons with pop-up titles

Social media hover icons with pop-up titles – Botones redes sociales hover con pop-up CSS.
BY Kieran Hunter

HTML

<div>
 <a href="#"><span>Facebook</span></a>
 <a href="#"><span>Twitter</span></a>
 <a href="#"><span>Google+</span></a>
 <a href="#"><span>Github</span></a>
 <a href="#"><span>Dribbble</span></a>
 <a href="#"><span>CodePen</span></a>
</div>


CSS

div{display:inline-block;position:absolute;top:50%;left:50%;-ms-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
a{color:#fff;background:#000;border-radius:4px;text-align:center;text-decoration:none;font-family:fontawesome;position:relative;display:inline-block;width:40px;height:28px;padding-top:12px;margin:0 2px;-o-transition:all .5s;-webkit-transition:all .5s;-moz-transition:all .5s;transition:all .5s;-webkit-font-smoothing:antialiased}
a:hover{background:#5d5c5c}
a span{color:#666;position:absolute;font-family:sans-serif;bottom:0;left:-25px;right:-25px;padding:5px 7px;z-index:-1;font-size:14px;border-radius:2px;background:#fff;visibility:hidden;opacity:0;-o-transition:all .5s cubic-bezier(0.68,-.55,.265,1.55);-webkit-transition:all .5s cubic-bezier(0.68,-.55,.265,1.55);-moz-transition:all .5s cubic-bezier(0.68,-.55,.265,1.55);transition:all .5s cubic-bezier(0.68,-.55,.265,1.55)}
a span:before{content:'';width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #fff;position:absolute;bottom:-5px;left:40px}
a:hover span{bottom:50px;visibility:visible;opacity:1}
a:nth-of-type(1):before{content:'\f09a'}
a:nth-of-type(2):before{content:'\f099'}
a:nth-of-type(3):before{content:'\f0d5'}
a:nth-of-type(4):before{content:'\f113'}
a:nth-of-type(5):before{content:'\f17d'}
a:nth-of-type(6):before{content:'\f1cb'}
¿Te gusto el post?
¡Compártelo!

☑ Puede que también te interese:

Share Button with Tooltip CSS
Social Share Button with CSS and HTML
Social Icons vision 3D HTML y CSS