Here's the deal. I have troubles while trying to hide a paragraph element with a class"text".Link to the pen I've tried display:none but it didn't work for me either.

    <style>
    .img {
      position: absolute;
      left: 40%;
      transform: translateX(-50%);
    }
    .p-wrap {
      color: #fff;
      position: relative;  
      display: none;
    }
    .text {   
      display:none;
      color: #000;
      position: absolute;
      left: -130px;
    }
   </style>

  <div class="img">
   <div class="p-wrap">
     <p class="text"> Oh hey Mark</p>
   </div>
  <img
    src="https://source">
 </div>

Here's the deal. I have troubles while trying to hide a paragraph element with a class"text".Link to the pen I've tried display:none but it didn't work for me either.

    <style>
    .img {
      position: absolute;
      left: 40%;
      transform: translateX(-50%);
    }
    .p-wrap {
      color: #fff;
      position: relative;  
      display: none;
    }
    .text {   
      display:none;
      color: #000;
      position: absolute;
      left: -130px;
    }
   </style>

  <div class="img">
   <div class="p-wrap">
     <p class="text"> Oh hey Mark</p>
   </div>
  <img
    src="https://source">
 </div>

• javascript
• css

Share Improve this question Follow edited Feb 11, 2020 at 9:45 ellipsis 12.2k22 gold badges1818 silver badges3333 bronze badges asked Feb 11, 2020 at 9:29 brad_freshbrad_fresh 12922 silver badges1313 bronze badges 4

• 2 The enclosing style element </style>is missing. – Reporter Commented Feb 11, 2020 at 9:34
• 1 Someone has posted the fact, there is also a missing quotation sign at class=p-wrap – Reporter Commented Feb 11, 2020 at 9:38
• 1 May be little bit late, I followed you link to your example and the posted example works fine. – Reporter Commented Feb 11, 2020 at 9:50
• @reporter By the time it was probably already fixed but I made it broken again for the sake of an example. – brad_fresh Commented Feb 11, 2020 at 10:13

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

besides from display:none,other alternatives are

1. visibility: hidden;
2. opacity:0

But be carefull , with this element is still present in DOM(space is still allocated.)

You missed a closing quote mark there on a div with class p-wrap, so your DOM is not correctly generated.

<div class="img">
  <div class="p-wrap">
         <p class="text"> Oh hey Mark</p>
  </div>
  <img
    src="https://nypdecider.files.wordpress./2018/09/the-room-youtube.jpg?quality=80&strip=all&w=646&h=431&crop=1">
</div>

This will fix it.

Use visibility:hidden

.img {
  position: absolute;
  left: 40%;
  transform: translateX(-50%);
}
.p-wrap {
  color: #fff;
  position: relative;  
  display: none;
}
.text {   
  visibility:hidden;
  color: #000;
  position: absolute;
  left: -130px;
}
  

<div class="img">
   <div class="p-wrap">
     <p class="text"> Oh hey Mark</p>
   </div>
  <img
    src="https://source">
 </div>

There are multiple ways of hiding an element in CSS. You can hide it by setting opacity to 0, visibility to hidden, display to none or by setting extreme values for absolute positioning. Have you ever wondered why we have so many techniques of hiding an element when they all seem to do the same thing? All of these methods actually differ slightly from each other and this difference dictates which one of them is to be used in a specific situation. This tutorial will cover the minor differences that you need to keep in mind when hiding an element using any of the methods above.

Opacity

The property opacity is meant to set an element’s transparency. It was not designed to alter the bounding box of the element in any way. This means that setting the opacity to zero only hides the element visually. The element still occupies its position and affects the layout of the web page. It will also respond to user interaction as well.

.hide {
  opacity: 0;
}

Visibility

This property is also able to animate as long as the initial and final states have different values. This ensures that the transition between the states of visibility can be smooth instead of being abrupt.

.hide {
   visibility: hidden;
}

Display

All the descendants of our element will be hidden as well. This property cannot be animated so the transition between various states is always going to be abrupt.

Please note, the element is still accessible through the DOM. You will be able to manipulate it just like with any other element.

.hide {
   display: none;
}

Position

Suppose you have an element that you would like to interact with but you do not want it to affect the layout of your web page. No property up to this point can handle this situation properly. One thing that you can do in this situation is to move the element out of the viewport. This way it won’t affect the layout and will still be actionable. Here is the CSS to do that:

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

Clip-path

One more way of hiding elements is by clipping them. Previously, this could be done with the clip property but that has been deprecated in favor of a better property called clip-path. Nitish Kumar recently introduced the clip-path property here at SitePoint, so feel free to check that one out for more advanced usage of the property!

Keep in mind that the clip-path property as used below is not fully supported in IE or Edge yet. If using external SVG files for your clip-path, support is even more limited (that does not apply below). The clip-path property when used to hide an element looks like so:

.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}