Un Enlace Especial

EL CÓDIGO▼

<style> a.tooltip { position:relative; color:#0086BB; text-decoration:none; } a.tooltip span { display: none; } a.tooltip:hover span { display:block; position:absolute; top:1.6em; left:0.2em; width:auto; border:1px solid #FFF; color:#ffffff; text-align: center; padding: 5px 15px 25px 25px; font-size: 12px; padding: 5px; overflow:auto; font-family: Tahoma, Arial, sans-serif; z-index:20000; } a.tooltip > span { color: #FFFFFF; background: #010101; background: -moz-linear-gradient(top, #010101 0%, #56657B 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#010101), color-stop(50%,#56657B)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#010101', endColorstr='#56657B',GradientType=0 ); border: 1px solid #FFFFFF;opacity:1; } a.tooltip span { border-radius:2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -moz-box-shadow: 0px 0px 8px 4px #666; -webkit-box-shadow: 0px 0px 8px 4px #666; box-shadow: 0px 0px 8px 4px #666; opacity: 1; } </style> <div style = "text-align: center"> <a href="URL DEL ENLACE" class="tooltip" title="TEXTO DEL ENLACE"> TEXTO DEL ENLACE <span><img src="URL DE LA IMAGEN"width=100% height=auto><p> TEXTO QUE VA DENTRO DEL TOOLTIP CON LA IMAGEN.</p> </span></a> </div>