visibility

Definition

The visibility CSS property is used to control the visibility of an element. It determines whether an element is visible or hidden, affecting its rendering on the page.

The visibility property accepts two values:

visible: This is the default value. The element is visible and will be displayed on the page.
hidden: The element is hidden, but it still occupies space in the layout. It is not visible, and other elements are displayed as if it doesn’t exist.

Here’s an example:

.hidden-element {
  visibility: hidden;
}

In this example, the .hidden-element class sets the visibility property to hidden. The element with this class will be hidden from view, but it will still take up space within the layout. It will not be displayed, and other elements will flow as if it were not present.

It’s important to note that the visibility property only affects the visibility of the element itself and does not impact the visibility of its children or descendants. To hide an element and its children completely, including removing it from the layout flow, you can use the display property with a value of none.

The visibility property is commonly used when you want to hide an element while preserving its space in the layout or when you want to toggle the visibility of an element dynamically with JavaScript or CSS animations.

Syntax

.tooltip {
  visibility: hidden;
}

Values

visible: element is rendered (default).
hidden: element is not visible but still occupies layout space.
collapse: for table elements, collapse the row/column.
inherit / initial / unset.

Practical Examples

.tooltip {
  visibility: hidden;
  opacity: 0;
  transition: opacity 150ms ease;
}

.tooltip[data-show="true"] {
  visibility: visible;
  opacity: 1;
}

Toggle visibility in tandem with opacity for accessible tooltip animations.

HTML

Hidden tooltip

Visible tooltip

Code

<div class="space-y-3">
  <div class="relative inline-flex">
    <button class="rounded-md bg-slate-900 px-4 py-2 text-sm font-semibold text-white">Hover me</button>
    <span class="absolute left-1/2 top-full z-10 mt-2 -translate-x-1/2 rounded-md bg-slate-900 px-3 py-2 text-xs text-white opacity-0" style="visibility: hidden;">Hidden tooltip</span>
  </div>
  <div class="relative inline-flex">
    <button class="rounded-md bg-slate-900 px-4 py-2 text-sm font-semibold text-white">Tooltip shown</button>
    <span class="absolute left-1/2 top-full z-10 mt-2 -translate-x-1/2 rounded-md bg-slate-900 px-3 py-2 text-xs text-white" style="visibility: visible; opacity: 1;">Visible tooltip</span>
  </div>
</div>

Tips & Best Practices

Combine visibility with opacity or transform to animate without layout jumps.
Use display: none when you need to remove the element from layout entirely.
Remember that visibility: hidden still allows the element to receive focus unless you manage interaction.

Accessibility & UX Notes

When hiding interactive elements, also manage focus order with tabindex or aria-hidden.

Browser Support

Widely supported. collapse behaviour is largely limited to table elements.

display for toggling layout participation.
opacity for fade transitions.
aria-hidden to coordinate visibility with assistive technologies.

opacity