Visibility and Opacity

You think of Visibility and Opacity in CSS as two different games of hiding and revealing with you website elements. They both hide, but act surprisingly differently in the background.

Opacity and Visibility both hide elements, but behave distinctly as they affect page layout and interaction. Opacity is like a light dimmer; a value of 0, for example, renders an element 100% transparent, but it‘s no different from anything else in your document to the browser: it‘s ‘solid’, and the user can click on it.

Visibility, sompletely hides an element and does not allow clicking on it, but still leaves the element as a sort of “ghost”, continuing to take up physical space on your screen. Even though both affect your layout, unlike display:none, Opacity is great for nice transitions of fade-in, but Visibility is useful for hiding things the user should not be able to click.

1. Opacity: The “Ghost” Mode

opacity controls how transparent an element is. It uses a scale from 0.0 (completely invisible) to 1.0 (fully solid).

• How it works: Think of it like a dimmer switch on a light bulb.
• The “Catch”: The element will still be there even if you have 0_opacity:0; the element is just that much more see-through!.
• Interaction: It remains clickable but still occupies the same space on the page.

Pro Tip: When you change the opacity of a parent container, everything inside it (text, buttons, images) becomes transparent too.

2. Visibility: The “Innocent Bystander” Mode

The visibility property is usually set to either visible or hidden.

• How it works: When you set visibility: hidden, the element becomes completely invisible.
• The “Catch”: It doesn‘t work like opacity as you can‘t click on an element that is hidden but it still retains its “seat” in the layout. It creates an empty white space where it used to be.
• Sub-elements: Interestingly, if a parent is hidden but a child is set to visibility: visible, the child will actually show up!

3. The Great Comparison Table

To select the best, you should be familiar with what impact they have on the “flow” of the page.

4. Why use one over the other?

Use Opacity when:

• You want a hover effect (e.g., a button that fades in when you mouse over it).
• You want to create a “ghostly” overlay over an image.

Use Visibility when:

• You want to hide an error message but keep the layout from “jumping” when the message eventually appears.
• You want to hide something from the user’s eyes and mouse, but keep it in the document structure.

5. The “Invisible Man” Example

Imagine three people standing in a line:

1. Opacity 0: The middle person becomes a ghost. You can’t see them, but if you walk forward, you’ll bump into them.
2. Visibility Hidden: The middle person becomes truly invisible. You won’t bump into them, but the people on the left and right still leave a big gap for them.
3. Display None: The middle person leaves the room. The people on the left and right move closer to close the gap.

Check out our resources!

• Bootstrap Templates: Explore our Bootstrap Projects section.
• Free E-Books: Download your Free E-Books here.