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
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
<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>
.button {
background: #fc0;
padding: 10px 20px;
display: inline-block;
}
.descr {
visibility: hidden;
}
.button:hover + .descr {
visibility: visible;
}
Browser Support
The following table will show you the current browser support for the CSS visibility
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
12 | 1 | 1 | 4 | 1 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
18 | 4 | 10.1 | 1 | 1 | 4 |
Last updated by CSSPortal on: 2nd January 2024