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;
}

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

class="visible">Visible
 class="hidden">Hidden
 class="visible">Visible

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

Column 1
    Column 2
    Column 3
  
  
    Data 1
    Data 2
    Data 3
  
   class="collapse">
    Data 4
    Data 5
    Data 6
  
  
    Data 7
    Data 8
    Data 9

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

  opacity: 0.5;
}

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