3 ways to hide an element with CSS

3 Ways to Hide an Element | Code Architects

There are multiple ways to hide an element in CSS. At times, we need an element not being displayed on the screen to use later with JavaScript. The hidden element can be shown on the screen with the content popping JavaScript. There are 3 possible ways to hide an element with CSS.

  1. Display
  2. Visibility
  3. Opacity
1. Display
div {
  display: none;
}

The display property specifies the display behavior of an element. Setting the display as none will remove the element from the screen. It does not take up space.

2. Visibility
div {
  visibility: hidden;
}

The visibility property specifies whether or not an element is visible. It hides the element but takes up the space.

3. Opacity
div  {
  opacity: 0;
}

The opacity sets the opacity level of the element. The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent. The opacity will also take space in the screen area.


So, in a nutshell

Hiding in a nutshell | Hide element with CSS
Bonus 1
div {
  width: 0;
  height: 0;
  overflow: none;
}

Setting the width OR height as 0 will also technically hide the element. Also, set the overflow: none to avoid any child element popping out. 😉

Bonus 2
div {
  transform: scale(0);
}

transform: scale() defines a 2D scale transformation of the element.


Share this post, if you have liked the blog & thanks for scrolling ❤. You can read our other blogs here. Follow us on Instagram & Github.

Show 2 Comments

2 Comments

  1. Hairstyles

    Wonderful goods from you, man. I have understand your stuff previous to and you’re just extremely fantastic. I actually like what you’ve acquired here, really like what you are saying and the way in which you say it. You make it enjoyable and you still take care of to keep it wise. I can not wait to read far more from you. This is really a tremendous site.

Leave a Reply

Your email address will not be published. Required fields are marked *

8 − two =