CSS Trick: Enlace texto-imagen
Hoy, dando clase de CSS, un alumno me ha preguntado a ver si podia hacer un enlace que fuera una imagen y que al pasar por encima con el raton, se convirtiera en texto. Algo que con Javascript seria facil de hacer, pero todavia no hemos llegado a esa altura del curso, asi que habia que hacerlo con CSS, un reto, me encanta :)
bueno, vamos directamente al codigo, el enlace seria algo mas o menos asi:
<a href="#">texto</a>
y el codigo CSS…
a{
display:block;
width:30px;
background-image:url(boxdim.gif);
background-repeat:no-repeat;
overflow:hidden;
height:0px;
padding-top:17px;
}
a:hover{
overflow:visible;
background-image:none;
height:17px;
padding-top:0px;
}
Como veis, el truco se trata de jugar con el padding y el overflow para esconder el texto cuando el enlace se encuentra en el estado normal y luego quitar la imagen y el padding en el hover para que aparezca “magicamente” el texto. Además en los navegadores no-CSS simplemente aparecerá el texto, usabilidad asegurada ;)
Funciona en IE, mozilla y opera. Genial, adoro CSS, cada dia mas…