Supongamos que tengo el siguiente div:
<div class="contenido">
<img src="pepito.jpg">
Hombre
</div>
Necesito ocultar el texto "Hombre".
¿Cómo lo hago? Con css claro esta
Stack Overflow en español es un sitio de preguntas y respuestas para programadores y profesionales de la informática. Solo te toma un minuto registrarte.
Regístrate para unirte a esta comunidadUsando .css puedes ocultar únicamente el texto definiendo, el tamaño del texto a 0:
.contenido{
font-size: 0;
}
<div class="contenido">
<img src="pepito.jpg">
Hombre
</div>
o definiendo un color transparente:
.contenido{
color: transparent;
}
<div class="contenido">
<img src="pepito.jpg">
Hombre
</div>
NOTA: Usando esta opción el texto será visible si es seleccionado.
Seria algo asi
.contenido{visibility:hidden;}
.contenido img{visibility:visible;}
https://jsfiddle.net/xpvt214o/59875/
.contenido{visibility:hidden;}
.contenido img{visibility:visible;}
<div class="contenido">
<img src="http://lorempixel.com/400/200/">
Hombre
</div>
Creo yo que lo mejor sería que lo pusiera en una etiqueta span
.oculto{
display:none;
}
div.contenido:active span{
display:block;
}
<div class="contenido">
<img src="pepito.jpg">
<span class='oculto'>Hombre</span>
</div>
Y luego por css lo ocultas
.oculto{
display:none;
}
y con esto lo activas dando click en la imagen
div.contenido:active span{
display:block;
}
No sé si sea lo más adecuado, pero sí no quieres agregar una etiqueta extra, esta es la única opción que se me ocurre, Poner el color del texto del mismo color del div:
.contenido{
color: white;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<div class="contenido">
<img src="pepito.jpg">
Hombre
</div>
o poner el color en transparente:
.contenido{
color:rgba(0, 0, 0, 0);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: #47F;
}
<div class="contenido">
<img src="pepito.jpg">
Hombre
</div>
No se que quieras lograr pero puedes usar esto
<p hidden>Hombre</p>