CSS visibility Property

Description

The visibility CSS property specifies whether or not an element is visible. It can be used to hide elements without affecting the layout of the document. This is in contrast to the display property, which can also be used to hide elements, but also removes them from the layout.

Initial value: visible
Applies to: All elements
Inherited: No
Computed value: As specified
Animatable: Yes
JavaScript syntax: object.style.visibility

Interactive Demo

visibility: visible;

visibility: hidden;

visibility: collapse;

Hide me

Item 2

Item 3

Syntax

visibility: visible | hidden | collapse

Values

visibleThe generated box is visible.
hiddenObject is hidden. The box is invisible (fully transparent, nothing is drawn), but still affects layout. Descendants of the element will be visible if they have visibility:visible.
collapseThis value causes the entire row or column to be removed from the display, and the space normally taken up by the row or column to be made available for other content. This value is used for row, row group, column, and column group elements. If used on elements other than rows, row groups, columns, or column groups, 'collapse' has the same meaning as 'hidden'.

Example

HTML

<div class="button">Hover</div> <p class="descr">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

CSS

.button { 
   background: #fc0; 
   padding: 10px 20px; 
   display: inline-block; 
} 
.descr { 
   visibility: hidden; 
} 
.button:hover + .descr { 
   visibility: visible; 
}

Result

Editor