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

, el cual me entrega más control sobre el manejo de profundidades a través de z-index. Mi texto alternativo se posa sobre un luego después del , el cual a través del CSS se verá dentro, y con un fondo y con transparencia.


     CSSLab – Otro laboratorio de CSS, pero en español
     Click para abrir

SafariFirefoxInternet Explorer 7OperaCaminoFlock

Pues ahora viene la magia:

#ejemplo {
     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;
}

Primero, definimos nuestro

, como dije con un z-index inferior para dejarlo abajo de nuestro y posicionado relativamente. Esto es muy importante, ya que a continuación nuestro estará posicionado absolutamente en relación al
, lo que lo colocará sobre la imagen (que según se muestra tiene z-index: 1, superior al
pero inferior al z-index: 2 del ) Este texto será desplegado con un :hover en el
, lo que no hace que funcione en IE6 (ya que este browser no soporta pseudo-classes que no sean links ,lo cual para este caso me importa bien poco). El resto, código para que se vea bonito.

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.