Selected Reading
Q&A

CSS - Visibility

The CSS visibility property allows you to show or hide an element without changing the layout of a document, while hidden elements take up space.

The visibility property can be used to create a variety of effects, such as hiding elements that are not yet ready to be displayed, or hiding elements that are only relevant to certain users.

The visibility property can take any of the following values:

visible − The element is visible.
hidden − The element is hidden, but it still takes up space on the page.
collapse − Remove table rows, columns, column groups, and row groups from a table. collapse has the same meaning as hidden if it is used on nontable elements.
initial − Sets the visibility of an element to its default value.
inherit − Inherits the visibility property from its parent element.

CSS Visibility - Demo

Try to select different values for CSS visibility property and see the result in right box.

CSS Visibility - Making Elements Visible

The CSS property visibility: visible makes an element visible. This is the default value for the visibility property.

Example

Here is an example -

<html>
<head>
<style>
   h2 {
      visibility: visible;
   }
</style>
</head>
<body>
   <h2>This element will remain visible</h2>
</body>
</html>

CSS Hidden - Making Elements Hidden

The CSS property visibility: hidden hides an element from the user's view, but it does not remove it from the document layout.

The element will still be accessible to screen readers and will affect the layout of the page, even though it is not visible.

Example

Here is an example -

<html>
<head>
<style>
   .visible {
      visibility: visible;
   }
   .hidden {
      visibility: hidden;
   }
</style>
</head>
<body>
   <h2 class="visible">This element will be visible</h2>
   <h2 class="hidden">This element will be hidden</h2>
</body>
</html>

CSS Visibility Collapse

To remove a table row or column without affecting the layout of the table, you can set the visibility property of the row or column to collapse. This value is only valid for table elements.

Example

Here is an example -

<html>
<head>
<style>
   .collapse {
      visibility: collapse;
   }
   table {
      border-collapse: collapse;
      color: #ffffff;
      width: 100%;
      background-color: #35DC5A;
      border: 2px solid black;
   }
   th, td {
      border: 2px solid black;
      padding: 8px;
      text-align: left;
      font-size: 20px;
   }
</style>
</head>
<body>
   <table>
      <tr>
         <td>Orange</td>
         <td>Magoes</td>
         <td class="collapse">Carbs</td>
      </tr>
      <tr>
         <td>Banana</td>
         <td>Dates</td>
         <td>Nuts</td>
      </tr>
   </table>
</body>
</html>

CSS Visibility Collapse On Nontable Elements

Following example demonstrates when visibility:collapse is set on nontable elements, here we see the property acts same as visibility:hidden:

<html>
<head>
<style>
   .collapse {
      visibility: collapse;
   }

</style>
</head>
<body>
  <h2>Collapse a Non-Table Elements</h2>
  <h2 class="collapse">1 - You can not see this element</h2>
  <h2>2 - You can see this element</h2>
</body>
</html>

CSS Visibility Transition Effects

Following example demonstrates how the element is hidden on hovering over an image:

<html>
<head>
<style>
   .collapse {
      visibility: collapse;
   }
   img:hover + .hidable {
    visibility: hidden;
  }
</style>
</head>
<body>
  <img src="images/tutimg.png" style="cursor:pointer;" />
  <h2 class="hidable">Hovering over the above image hides me!</h2>
</body>
</html>