How to use the Visibility & Opacity Properties in CSS

Visibility

The visibility property controls whether to show or hide an element. When set to visible, the element will be displayed normally.

.visible {
  visibility: visible;
}
 
.hidden {
  visibility: hidden;
}
 
.collapse {
  visibility: collapse;
}

When set to hidden, the element will become invisible, but the space it occupies will still be preserved.

<div class="visible">Visible</div>
<div class="hidden">Hidden</div>
<div class="visible">Visible</div>

As for collapse, different elements are treated differently. For table elements such as table rows (<tr>) or columns, the element will become invisible, and the space it occupies will be collapsed.

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <tr class="collapse">
    <td>Data 4</td>
    <td>Data 5</td>
    <td>Data 6</td>
  </tr>
  <tr>
    <td>Data 7</td>
    <td>Data 8</td>
    <td>Data 9</td>
  </tr>
</table>

But for other elements, it behaves the same as hidden.

Opacity

The opacity property accepts a numeric value from 0 to 1, allowing you to control the opacity of an element.

<div></div>

div {
  width: 300px;
  height: 400px;
  background-image: url(. . .);
  background-size: cover;
 
  opacity: 0.5;
}

Visibility vs. opacity vs. display: hidden

There are three different properties in CSS that can control the visibility of an element, visibility, opacity, and display. Let's discuss their differences before we wrap up this lesson.

visibility accepts three values, visible, hidden, and collapse.

• When set to visible, the element will be displayed normally.
• When set to hidden, the element will be hidden, but the space it occupies will be preserved.

As for collapse, when a table row or column is set to collapse, that row or column will be hidden, and the space it occupies will also be removed. When other elements are set to collapse, it behaves just like hidden.

When opacity is set to 0, the element will be hidden, but the space it occupies will be preserved. This is just like setting visibility to hidden.

When opacity is set to 1, the element will be displayed normally, just like setting visibility to visible.

When setting the display property to hidden, it will remove the element from the DOM tree, meaning the element will be hidden, and the space it occupies will also be removed.

This is kind of like setting visibility to collapse, but it works for all elements, not just table rows and columns.

display vs. visibility

display can also control whether or not an element is rendered on the webpage. When display is set to none, the element will not be displayed.

This can create useful features when combined with JavaScript, allowing you to toggle the element on and off.

This behavior is very similar to another CSS property called visibility.

Their difference is that when visibility is set to hidden, the element is still on the webpage, just not displayed by the browser. It will take up the same space as before.

When display is set to none, the element will be completely removed from the webpage.

The display property is probably the most important CSS property we are going to cover in this chapter. It not only controls the display types of individual elements, but also the layout of its children.

However, this requires a deeper understanding of CSS, so we will come back to this topic later.