visibility

Hides an element but leaves behind the empty space it occupied.

Initial value: visible
Inherited: Yes
Animatable: yes, abruptly (it stays visible for the whole transition)
Applies to: all elements
JavaScript: element.style.visibility = "hidden"

On this page

Example
Definition and usage
Syntax
Values
Values in practice
Browser support
Good practices
Related entries

Example

CSS

.tooltip {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s, visibility 0.2s;
}

.trigger:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

Preview

Definition and usage

The visibility property shows or hides an element without changing the page layout. An element with visibility: hidden becomes invisible and unclickable, but its spot stays reserved. That sets it apart from display: none, which removes the element entirely.

Unlike most properties, visibility is inherited. A child of a hidden parent can still set visibility: visible and show itself again.

The property can transition smoothly, which is handy for menus and tooltips. It’s usually paired with opacity, so the element fades out first and only becomes unclickable afterward.

Syntax

visibility: visible | hidden | collapse;

Values

visible
The element is visible. The default value.
hidden
Element 2 disappears, but the gap it left behind stays.
collapse
On table rows and columns, it removes them without rebuilding the table. On ordinary elements it behaves like hidden.

Value	Description
visible	The element is visible. The default value.
hidden	Element 2 disappears, but the gap it left behind stays.
collapse	On table rows and columns, it removes them without rebuilding the table. On ordinary elements it behaves like `hidden`.

Values in practice

visible

The element is visible. The default value.

.demo { visibility: visible; }

hidden

Element 2 disappears, but the gap it left behind stays.

.demo { visibility: hidden; }

collapse

On table rows and columns, it removes them without rebuilding the table. On ordinary elements it behaves like hidden.

.demo { visibility: collapse; }

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

An element hidden with visibility: hidden still takes up space. If it should disappear along with the gap, use display: none instead.
Screen readers skip elements with visibility: hidden, the same as with display: none.

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice CSS in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course