8

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

5 respuestas 5

5

Usando .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.

0
4

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>

2

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;
}
1

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>

0

No se que quieras lograr pero puedes usar esto

<p hidden>Hombre</p>
3
  • 1
    Lo que quiero evitar es usar una nuevo tag el 5 abr. 2018 a las 22:19
  • El título dice "usando CSS".
    – Shaz
    el 6 abr. 2018 a las 13:25
  • Se edito la pregunta, no habia especificado. (Y) el 6 abr. 2018 a las 15:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.