Visibility & Opacity

Visibility

The visibility property controls whether an element is shown or hidden. 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 becomes invisible, but the space it previously occupied is still 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 its 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;
}

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 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 revisit this topic later.