CSS visibility Property

The visibility property specifies whether an element is visible or hidden.

When hidden the element still occupies the same space on the page.

Example

#

Two elements with text. One visible, the other hidden.

This div element is visible
This div element is hidden
<div style="visibility: visible">This div element is visible</div>
<div style="visibility: hidden">This div element is hidden</div>

Using visibility

The visibility property shows or hides an element.

Unlike display:none, a hidden element will still occupy the same space.

Unlike opacity, nothing inside the hidden element can be selected or highlighted.

Syntax

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

Values

#

Value Description
visible Default. The element is visible
hidden Element is hidden but takes up space.
collapse Used for table rows, columns, row groups, and column groups. Removes a row or column but still retains the space being used. When used on other elements, it renders as hidden.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

Did you know?

Did you know?

Transition effects applied to visibility

Hover over the <img> element.
After 1 second the <div> below the image will be hidden.

This element will be hidden when hovering the image
<style>
  .hidable {
    background-color: steelblue;
    color: white;
    padding: 15px;
    transition-duration: 1s;
    visibility: visible;
  }

  img:hover + .hidable {
    visibility: hidden;
  }
</style>

<img src="/img/css/vangogh.jpg"
     style="cursor:pointer;" />

<div class="hidable">
  This element will be hidden
  when hovering the image
</div>

Browser support

This table shows when visibility support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
4.0 Sep 1997
Opera
4.0 Jun 2000
Safari
1.0 Jun 2003

You may also like

Guides