Hide the text of a div using CSS

Question

Hide the text of a div using CSS

Navigation

#1 by (5 votes)
#2 by (4 votes)
#3 by (2 votes)
#4 by (1 votes)
#5 by (0 votes)

8

Suppose I have the following div:

<div class="contenido">

<img src="pepito.jpg">

Hombre

</div>

I need to hide the text "Man".

How do I do it? With clear css this

html css div

asked by Karlos Yalta 06.04.2018 в 00:11

source

5 answers

Differentiate types of HTML elements in JavaScript or jQuery delete an attribute of an object more optimally

score 5 · Answer 1

Using .css you can only hide the text by defining, the text size to 0:

.contenido{
   font-size: 0;
}

  <div class="contenido">

    <img src="pepito.jpg">

    Hombre

    </div>

or defining a transparent color:

    .contenido{
        color: transparent;
    }

      <div class="contenido">

        <img src="pepito.jpg">

        Hombre

        </div>

NOTE: Using this option the text will be visible if selected.

score 4 · Answer 2

It would be something like that

.contenido{visibility:hidden;}
.contenido img{visibility:visible;}

link

    .contenido{visibility:hidden;}
    .contenido img{visibility:visible;}

<div class="contenido">

<img src="http://lorempixel.com/400/200/">

Hombre 

</div>

score 2 · Answer 3

I think it would be best if I put it on a span tag

.oculto{
       display:none;
    }


    div.contenido:active span{
         display:block;
    }

<div class="contenido">
    
    <img src="pepito.jpg">
    
    <span class='oculto'>Hombre</span>
    
    </div>

And then by css what is hidden

.oculto{
   display:none;
}

and with this you activate it by clicking on the image

div.contenido:active span{
     display:block;
}

score 1 · Answer 4

I do not know if it's the right thing to do, but if you do not want to add an extra tag, this is the only option I can think of, Put the color of the text in the same color of the 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>

or put the color in transparent:

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

score 0 · Answer 5

0

I do not know what you want to achieve but you can use this

<p hidden>Hombre</p>

answered by 06.04.2018 в 00:14