<div class='contenedor'> <!--INICIO--> <!--1--> <a class="tooltip" href="#">Blogger <span> <img src="https://lh6.googleusercontent.com/_NNS6r_z4aeg/Tc8G8kZwj4I/AAAAAAAAUn8/Mqe4cHhRsIc/blogger-32x32.png" /> Blogger es un servicio creado por PyraLabs </span> </a> <!--2--> <a class="tooltip" href="#">Wordpress <span> <img src="http://gamerchants.com/images/icon-wordpress-32x32.png" /> WordPress es un sistema de gestiĆ³n de contenido </span> </a> <!--FIN--> <div>
.tooltip { position: relative; display: inline-block; } .tooltip span { background: #54b8f2; border: 4px solid #54b8f2; bottom: 30px; /** Aumentar para mayor efecto **/ border-radius: 6px; color: white; font-size: 13px; left: 50%; line-height: 16px; margin-left: -88px; opacity: 0; padding: 8px; position: absolute; text-align: center; /* Texto centrado */ /** Transiciones **/ -webkit-transition:0.2s; -moz-transition:0.2s; -o-transition:0.2s; transition:0.2s; visibility: hidden; width: 150px; /**Ancho**/ } .tooltip span img{ float:left; border:none; margin-left:auto; margin-right:auto; } a:hover.tooltip span { bottom: 50px; /*distancia del vinculo al tooltip*/ opacity: 1; visibility: visible; z-index: 100; } /**Flecha del tooltip**/ .tooltip span:after { bottom: -14px; border-left: 10px solid transparent; border-top:10px solid #54b8f2; border-right: 10px solid transparent; content: ''; height: 0; left: 50%; margin-left: -9px; position: absolute; width: 0; } .contenedor{ text-align:center; margin-left:auto; margin-right:auto; width:35%; position:absolute; top:25%; } .contenedor a{ display: inline; padding:5px 15px; margin:0 5px; text-align:center; font-family:Georgia, "Times New Roman", Times, serif; font-size:18px; color:#090600; text-shadow: 1px 1px 1px rgba(255,255,255,0.5); text-decoration:none; background-color: rgba(34,141,224, 0.6); background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); -moz-border-radius: 4px; border-radius: 4px; border:1px solid #090600; }