# visibility property

The `visibility` property sets an element's invisibility. In this case, all other elements will behave as if the element had never disappeared.

## Syntax

`selector { visibility: visible or hidden or collapse; }`

## Values

Value | Description
--- | ---
`visible` | An element is visible.
`hidden` | An element becomes invisible, as if transparent, and at the same time continues to participate in page formatting.
`collapse` | If you use `collapse` for the contents of table cells, then they seem to disappear, and the table is rebuilt in a new way. If this value is not applied to table rows or columns, then the result of its use will be the same as with `hidden`.

Default value: `visible`.

## Example

Let's make the text of the first paragraph initially invisible, but when we hover over the `'Show text'` button we can read it:

`<button>Show text</button> <div class="text">text1</div> <div>text2</div>` `div{ border: 1px solid black; width: 100px; } .text { visibility: hidden; } button:hover + .text { visibility: visible; }`

:

## See also

- the `opacity` property
  that sets an element transparency

← →
↑
en ru