Como ocultar una imagen dejando visible la descripción del atributo "ALT"

[Remy_Lebaut]

Hola gente, este es mi primer tema y vengo con una pregunta que no he podido encontrar respuesta usando google!

Quisiera preguntar es posible ocultar una imagen para que solo se vea su descripción alternativa que me proporciona el atributo ATL?

Ejemplo:
<img src="http://i71.servimg.com/u/f71/17/28/83/36/banner23.png" alt="Juegos en General">

esa imagen de muestra en el indice de mi foro, pero luego al entrar al "foro juegos" me gustaría que solo se viera lo que el atributo ALT tienen, en este caso (Juegos en general).

En la hoja de estilos, tengo identificada la sección a tratar... que seria (a.nav).
He probado con (display: none) pero me deja un espacio vació y yo necesito que muestre el texto (juegos en general) que ya tengo colocado en la url de la imagen.

Bueno espero haber sido claro y si alguien me puede tirar alguna idea se lo agradeceria mucho!

[pzin]

Experimentando y simplificando al máximo me funciona haciendo algo así:

Código CSS:

img {
  content: '';
}
 
img:after {
  content: attr(alt);
}
 

Funcionando: http://codepen.io/pzin/pen/iAglC

[pzin]

Bueno, lo probé en Chrome nada más y funcionaba. En Firefox no lo hace.

Luego leyendo la especificación (la parte verde):

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

Entiendo que luego cada navegador lo hace un poco como quiere si la especificación no lo especifica.

Voy a probar a ver si sale otra cosa.

[Remy_Lebaut]

HU que pena, pero me deformaron el foro esos códigos, hasta los perfiles se convirtieron en una misma masa de confusión!

PD: Gracias por intentar ayudarme!

[Remy_Lebaut]

Alguien tendra alguna idea mas de como lograr mostrar el atributo y no la imagen?

[pzin]

Iniciado por Remy_Lebaut

HU que pena, pero me deformaron el foro esos códigos, hasta los perfiles se convirtieron en una misma masa de confusión!

Obviamente tendrías que cambiar el selector para que no afecte a todas las imágenes del sitio.

Pero como dije, eso sólo me ha funcionado en Chrome.

[Remy_Lebaut]

Soy principiante en el tema, asi que dire asi...

Tengo la imagen con su atributo ATL.
<img src="http://i71.servimg.com/u/f71/17/28/83/36/banner23.png" alt="Juegos en General">
Así también tengo varias de otros foros (secciones) pero me intereza que la imagen desaparezca solo cuando estoy dentro de la sección y no estando fuera ya que sirve de banner para identificar la sección mencionada!
Pero valiendo me de la hoja de estilos que trae el panel de control puedo atacar las imagenes en el lugar preciso donde quiero hace las modificaciones, es solo que no se como hacer que ina imagen sea ignorada y que en reemplazo se muestre su atributo.

Eso seria genial ya que cada una de las imágenes tiene el atributo ALT con el texto correspondiente y quedaría muy bien, ademas no me ahorraría el cargar dicha imagen inútilmente!

Bueno espero que lo que pido no sea muy complicado, la verdad pence que podía ser fácil, pero yo no entiendo mucho jaja

Saludos!