DEV Community

Cover image for Comparing Visibility, Opacity, and Display: hidden in CSS
TheDevSpace
TheDevSpace

Posted on • Originally published at thedevspace.io

Comparing Visibility, Opacity, and Display: hidden in CSS

This post was originally published at thedevspace.io. Everything you need to master web development, all in one place.

Visibility

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

Visit Code Demo 🔗

.visible {
  visibility: visible;
}

.hidden {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
div {
  width: 300px;
  height: 400px;
  background-image: url(. . .);
  background-size: cover;

  opacity: 0.5;
}
Enter fullscreen mode Exit fullscreen mode

Visit Code Demo 🔗

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.

Read More

Follow us for daily coding tips:

🔹 TheDevSpace | LinkedIn

🔹 TheDevSpace | X

🔹 TheDevSpace | Threads

Top comments (0)