Свойство visibility

Свойство visibility задает невидимость элементу. При этом все остальные элементы будут вести себя так, будто элемент никуда не пропадал.

Синтаксис

селектор {
	visibility: visible или hidden или collapse;
}

Значение	Описание
`visible`	Элемент видимый.
`hidden`	Элемент становится невидимым, словно прозрачным и при этом продолжает участвовать в форматировании страницы.
`collapse`	Если использовать `collapse` для содержимого ячеек таблиц, то они словно исчезают, а таблица перестраивается по новой. Если данное значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как `hidden`.

Значение по умолчанию: visible.

Давайте сделаем так, чтобы текст первого абзаца изначально был невидим, но при наведении курсора на кнопку 'Show text' мы могли его прочитать:

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