Five Ways to Hide Elements in CSS

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

If you intend to use the opacity property to hide the element from screen readers — unfortunately this is not possible. The element and all its content will be read by screen readers, just like all the other elements on the web page. In other words, the element behaves just the way it would have had it been opaque.

I should also mention that the opacity property can be animated and used to create some splendid effects. Any element with opacity less than 1 will also create a new stacking context.

Take a look at the following demo:

See the Pen Hiding elements with opacity by SitePoint (@SitePoint) on CodePen.

When you hover over the hidden second block, the element transitions smoothly from the state of complete transparency to being fully opaque. The block also has a cursor of pointer to show that it can be interacted with.

Visibility

The next property on our list is visibility. Setting it to hidden will hide our element. Just like the opacity property, the hidden element will still affect the layout of our web page. The only difference is that this time it will not capture any user interaction when hidden from the user. Additionally, the element will also be hidden from screen readers.

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

This demo shows how visibility is different from opacity:

See the Pen Hiding elements with visibility by SitePoint (@SitePoint) on CodePen.

Notice that the descendants of an element with visibility set to hidden can still be visible if their visibility property is explicitly set to visible. Try to hover just over the hidden element and not on the paragraph inside, you will see that your cursor does not change to a pointer. Moreover, if you try to click on the element, your clicks won't be registered either.

The <p> tag inside our <div> will still capture all the mouse events though. As soon as you hover over the text, the <div> itself becomes visible and starts registering events.

Display

The display property hides the element in the true sense of the word. Setting display to none makes sure that the box-model is not generated at all. Using this property, there is no empty space left behind when the element has been hidden. Not only that, but any direct user interaction won't be possible as long as display is set to none. Moreover, screen readers won't read the element's content either. It is as if the element does not exist.

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

Take a look at the CSS of this demo:

See the Pen Hiding elements with the display property by SitePoint (@SitePoint) on CodePen.

You will see that second block has a paragraph with its display property set to block but the paragraph is still invisible. This is one more difference between visibility: hidden and display: none. In the first case, any descendant which explicitly sets visibility to visible will become visible but that is not what happens with display. All the descendants are kept hidden irrespective of the value of their own display property.

Now, hover a few times over the first block in the demo. Done hovering? Click on this first block. This should make the second block visible. The count inside should now be a number other than zero. This is because the element, even though hidden from users can still be manipulated with JavaScript.

Continue reading %Five Ways to Hide Elements in CSS%

by Baljeet Rathi via SitePoint