The visibility Property in CSS

The visibility property in CSS is used to control whether an element is visible or hidden on the web page. Unlike the display property, which completely removes an element from the document flow when set to none, the visibility property hides an element while still maintaining its space in the layout. This means that when an element is hidden using visibility, it still occupies its original space in the layout, but it is not rendered or visible to the user.

Values of visibility

1. visibility: visible;

   • The element is visible. This is the default value for the visibility property.

   .visible {
     visibility: visible;
   }
   

2. visibility: hidden;

   • The element is hidden, but it still takes up space in the layout. The content is not displayed, but the element's area remains intact.

   .hidden {
     visibility: hidden;
   }
   

3. visibility: collapse;

   • For table rows, columns, and other table elements, this value collapses the element, meaning it will not only be hidden but also will not take up any space in the layout. For non-table elements, this value behaves the same as hidden.
   • Note: This value is primarily used with table elements.

   .collapse {
     visibility: collapse;
   }
   

4. visibility: inherit;

   • The element inherits the visibility value from its parent element.

   .inherit {
     visibility: inherit;
   }
   

How visibility Works

• Maintaining Layout: One of the key features of visibility: hidden; is that the element still occupies space in the document layout, preserving the structure of the page. This can be useful in scenarios where you need to hide content temporarily but want to maintain the layout, avoiding any shifting of surrounding elements.

• Impact on Events: An element with visibility: hidden; does not respond to user interactions such as clicks or hover effects, similar to a fully hidden element. However, the space it occupies can still affect the positioning of other elements on the page.

Example Usage

<div class="container">
  <div class="box visible">Visible Box</div>
  <div class="box hidden">Hidden Box (still takes space)</div>
  <div class="box">Another Visible Box</div>
</div>

.container {
  background-color: lightgray;
  padding: 20px;
}

.box {
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
  background-color: lightblue;
  border: 1px solid darkblue;
}

.hidden {
  visibility: hidden;
}

Explanation

• Visible Box: The first div is fully visible and takes up space.
• Hidden Box: The second div is hidden using visibility: hidden;, so it is not rendered, but it still occupies space in the layout. The surrounding elements do not shift to fill the space.
• Another Visible Box: The third div is visible and appears in its usual position, following the hidden box.

Use Cases for visibility

• Temporarily Hiding Content: Use visibility: hidden; when you want to hide content without disrupting the layout. This is common in interactive applications where elements might be toggled on and off without affecting the surrounding content.

• Creating Overlays: In situations where you need to reveal or hide content dynamically (e.g., tooltips, dropdowns), you can toggle visibility to ensure the content is only shown when needed without removing it from the flow.

• Animation Effects: visibility can be used in CSS animations, where you want to gradually hide or show an element. It can be combined with opacity for fade-in and fade-out effects while maintaining the element's space.