Texto auxiliar con estilo
Pido disculpas por un título tan simple esta vez. No se me ocurrió nada mejor. Enfin, lo que vale es lo que sigue.
Siguiendo con el desarrollo del nuevo Be Studios, creé un método donde al posar el mouse sobre una imagen, se desplegara un texto alternativo (no, no es alt) y que fuera auxiliar a la imagen. Esto lo había visto antes, sólo que no recuerdo ningún link en este momento. Entonces, recreé la situación, y la explico a continuación. Antes sí, vean el ejemplo para que sepan de qué hablo.
Primero el código HTML. En este caso, es sólo una imagen simple y silvestre. Ella está contenida dentro de un
Pues ahora viene la magia:
#ejemplo { Primero, definimos nuestro Finalmente la transparencia a prueba de browsers. Si ven el código fuente en el ejemplo, verán que para IE7 está implementado con comentario condicional., el cual a través del CSS se verá dentro, y con un fondo y con transparencia.
Click para abrir
z-index: 0;
width: 300px;
height: 100px;
position: relative;
}
#ejemplo img {
z-index: 1;
}
#ejemplo span {
display: none;
}
#ejemplo:hover span {
display: block;
position: absolute;
right: 0;
bottom: 0;
z-index: 2;
padding: 2px 5px;
background: #000;
color: white;
font-weight: bolder;
font-size: 24px;
text-shadow: #000 1px 1px 3px;
opacity: 0.4;
-moz-opacity: 0.4;
}