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;
}

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.

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;
}