CSS visibility Property

Description

The visibility property specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the display property to 'none' to suppress box generation altogether).

Initial value: visible
Applies to: All elements
Inherited: No
Media: Visual
Computed value: As specified
Animatable: Yes
CSS Version: CSS2, CSS3
JavaScript syntax: object.style.visibility

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