CSS: Difference between opacity:0, visibility:hidden and display:none

If you are going to make part of the page totally transparent, there are essentially 3 CSS ways to achieve element transparency:

  1. opacity:0 (needs 2 more hacks for different browsers)
  2. visibility:hidden
  3. display:none

Bob, the man!

Let me take the example of Bob sitting in a chair to explain how these styles are different from each other. Without any of the styles above, he’s just a totally ordinary man sitting in the chair there for all to see:

  1. Bob’s in existence in the universe (DOM).
  2. The chair (the space Bob takes up) is there: Bob occupies the seat which cannot be used by anything else.
  3. You can see him no problem.
  4. You can touch him and he reacts!

For each of the styles applied, part of the statements will not be true, let’s take a look at them one by one.

opacity:0

As the style name suggests, opacity only makes the element able to be looked through, like in a sci-fi novel where a human or vehicle is made disappear while the physics still apply — you can still interact with the object, because it’s actually there. Just it’s made transparent and looked through, appearing to be not there.

One of the frequent uses of opacity is to style the HTML file upload control. And, opacity is the only CSS rule to make elements semi-transparent or translucent.

Bob:

  1. true
  2. true
  3. false
  4. true

visibility:hidden

CSS rule visibility only deals with the visibility of the element, nothing more. With visibility:hidden, you rip out the functionality and physical appearance at the same time, but retaining the space it used to take up. It’s invisible — both in vision and physical tangibility.

With the example of Bob, it’s like he’s gone to the rest room from the chair which is still there and which no one is allowed to use — Bob’s a badass.

Bob:

  1. true
  2. true
  3. false
  4. false

display:none

After being applied display:none, the element is simply off the grid, it’s not there on the web page anymore in all senses, except for as a notational node in the DOM. You can still manipulate it with JavaScript and make it display again, though. But for now, it’s completely gone from the web page, along with the space it used to occupy, like it’s never been there before.

Bob’s gone with his chair and the space is vacant again.

Bob:

  1. true
  2. false
  3. false
  4. false

One more way — Killing Bob!

That is to completely wipe out the element from the HTML. Just delete the node from the HTML in your web page editor.

Bob:

  1. false
  2. false
  3. false
  4. false

You murderer!

2 thoughts on “CSS: Difference between opacity:0, visibility:hidden and display:none”

Comments are closed.

Scroll to Top