CSS Visibility
CSS Visibility
The CSS visibility property allows you to show or hide an element without changing the document’s layout; hidden elements take up space.
The visibility property can be used to create a variety of effects, such as hiding elements that aren’t ready to be displayed or hiding elements that are only relevant to certain users.
The
visibility attribute can take any of the following values:
- visible – Makes the element visible.
-
hidden – Makes the element hidden, but still occupies space on the page.
-
collapse – Removes table rows, columns, column groups, and row groups from a table. collapse has the same meaning as hidden when used on non-table elements.
-
initial – Sets the element’s visibility to its default value.
-
inherit – Inherits the visibility property from the parent element.
CSS Visibility – Making an Element Visible
The CSS property visibility: visible makes an element visible. This is the default value of the visibility property.
Example
This is an example –
<html>
<head>
<style>
h2 {
visibility: visible;
}
</style>
</head>
<body>
<h2>This element will remain visible</h2>
</body>
</html
CSS Visibility – Hiding Elements
The CSS property visibility: hidden hides an element from the user’s view but does not remove it from the document layout.
Even if an element is invisible, it can still be accessed by screen readers and affect the layout of the page.
Example
Here’s an example –
<html>
<head>
<style>
.visible {
visibility: visible;
}
.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<h2 class="visible">This element will be visible</h2>
<h2 class="hidden">This element will be hidden</h2>
</body>
</html>
CSS Visibility – Collapse
To remove a row or column from a table without affecting its layout, you can set the row or column’s visibility property to collapse . This value is valid only for table elements.
Example
This is an example –
<html>
<head>
<style>
.collapse {
visibility: collapse;
}
table {
border-collapse: collapse;
color: #ffffff;
width: 100%;
background-color: #35DC5A;
border: 2px solid black;
}
th, td {
border: 2px solid black;
padding: 8px;
text-align: left;
font-size: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<td>Orange</td>
<td>Magoes</td>
<td class="collapse">Carbs</td>
</tr>
<tr>
<td>Banana</td>
<td>Dates</td>
<td>Nuts</td>
</tr>
</table>
</body>
</html>
CSS Visibility – Collapse on Non-Table Elements
The following example demonstrates that when visibility:collapse is set on a non-table element, we can see that the property is the same as visibility:hidden:
<html>
<head>
<style>
.collapse {
visibility: collapse;
}
</style>
</head>
<body>
<h2>Collapse a Non-Table Elements</h2>
<h2 class="collapse">1 - You can not see this element</h2>
<h2>2 - You can see this element</h2>
</body>
</html>
CSS Visibility – Transition Effects
The following example shows how to hide an element when the mouse hovers over an image:
<html>
<head>
<style>
.collapse {
visibility: collapse;
}
img:hover + .hidable {
visibility: hidden;
}
</style>
</head>
<body>
<img src="https://coder-cafe.com/wp-content/uploads/2025/09/images/tutimg.png" style="cursor:pointer;" />
<h2 class="hidable">Hovering over the above image hides me!</h2>
</body>
</html>