CSS - Visibility

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.

Possible 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.

Applies to

All the HTML elements.

DOM Syntax

visibility: visible | hidden | collapse | initial | inherit;

CSS visibility - visible Value

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

<html>
<head>
<style>
   h2 {
      visibility: visible;
   }
</style>
</head>
<body>
   <h2>Tutorialspoint CSS visibility</h2>
</body>
</html>

CSS visibility - hidden Value

The visibility: hidden property 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.

<html>
<head>
<style>
   h2 {
      visibility: hidden;
   }
</style>
</head>
<body>
   <h2>Tutorialspoint CSS visibility hidden</h2>
   <p>The hidden heading is still visible to screen readers and takes up space in the page.</p>
</body>
</html>

CSS visibility - collapse Value

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.

<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>visible</td>
         <td>hidden</td>
         <td class="collapse">collapse</td>
      </tr>
      <tr>
         <td>initial</td>
         <td>inherit</td>
         <td>revert</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 on nontable elements</h2>
  <p class="collapse">you cant see me</p>
  <p>the above sentence is hidden</p>
</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>
Advertisements