3 ways to hide an element with CSS

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

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.