31. What are the differences between `opacity` and `visibility` in CSS?

opacity and visibility are CSS properties used to control the visibility of elements, but they have different effects on the page layout and interaction with elements.

opacity:

• Sets the transparency of an element.
• Values range from 0 (completely transparent) to 1 (completely opaque).
• The element remains in the document and occupies space.
• The element is still interactive even when transparent.

Example:

.element {
  opacity: 0.5;
}

visibility:

• Controls whether an element is visible or hidden.
• visible - the element is visible.
• hidden - the element is hidden but still occupies space in the layout.
• collapse - used in tables, removes the row or column and frees up space.
• Hidden elements are not interactive.

Example:

.element {
  visibility: hidden;
}

Differences:

• opacity changes the transparency of an element, but the element remains in the layout and is interactive.
• visibility hides the element but retains its place in the layout and removes its interactivity.