The visibility property specifies whether an element is visible or hidden.
When hidden the element still occupies the same space on the page.
Two elements with text. One visible, the other hidden.
<div style="visibility: visible">This div element is visible</div>
<div style="visibility: hidden">This div element is hidden</div>
The visibility property shows or hides an element.
Unlike display:none, a hidden element will still occupy the same space.
Unlike opacity, nothing inside the hidden element can be selected or highlighted.
visibility: visible | hidden | collapse |
initial | inherit;
| Value | Description |
|---|---|
visible |
Default. The element is visible |
hidden |
Element is hidden but takes up space. |
collapse |
Used for table rows, columns, row groups, and column groups. Removes a row or column but still retains the space being used. When used on other elements, it renders as hidden. |
initial |
Sets the value to its default value. |
inherit |
Inherits the value from its parent element. |
Hover over the <img> element.
After 1 second the <div> below the image will be hidden.
<style>
.hidable {
background-color: steelblue;
color: white;
padding: 15px;
transition-duration: 1s;
visibility: visible;
}
img:hover + .hidable {
visibility: hidden;
}
</style>
<img src="/img/css/vangogh.jpg"
style="cursor:pointer;" />
<div class="hidable">
This element will be hidden
when hovering the image
</div>
This table shows when visibility support started for each browser.
 Chrome
|
1.0 | Dec 2008 |
 Firefox
|
1.0 | Nov 2004 |
 IE/Edge
|
4.0 | Sep 1997 |
 Opera
|
4.0 | Jun 2000 |
 Safari
|
1.0 | Jun 2003 |
