👁️ CSS visibility — Complete Tutorial

🌐 What Is visibility?

The visibility property controls whether an element isvisible or hidden — but unlike display: none, the element still **occupies space in the layout** even when hidden.

>>“Use visibility when you want to hide an element but keep its layout space.”

Note

✔ Keeps layout space even when hidden
✔ Child elements may still become visible (special case!)
✔ Useful for toggling UI elements without shifting layout

📦 Syntax

visibility syntax

visibility: visible | hidden | collapse;

📌 Values Explained

ValueDescription
visibleDefault. Element is shown normally.
hiddenElement is hidden, but still takes up space.
collapseSpecial: Used by table rows/columns → space collapses.

🎯 visibility vs display: none

PropertyEffect
visibility: hiddenHides but reserves layout space
display: noneRemoves element from layout completely

📌 1. Basic Example

Hide an element

.box {
  visibility: hidden;
}

The box is invisible but still pushes surrounding elements.

📌 2. Toggle Visibility Without Reflow

No layout shift

.popup {
  visibility: hidden;
}

.popup.show {
  visibility: visible;
}

Great for dropdowns, tooltips, hover effects, and transitions.

📌 3. Visibility with Hover

Hover to show

.menu-item .submenu {
  visibility: hidden;
}

.menu-item:hover .submenu {
  visibility: visible;
}

📌 4. Child Visibility Override

If a parent has visibility: hidden, setting visibility: visible on a child **makes it visible again** — unlike display: none.

Child override

.parent {
  visibility: hidden;
}

.parent .child {
  visibility: visible;
}

Note

⚠️ This can lead to unexpected behavior — use carefully.

📌 5. visibility: collapse for Tables

collapse is meaningful in table layouts. It hides rows/columns and collapses space.

Collapse table row

tr.hidden-row {
  visibility: collapse;
}

📌 6. Animating Visibility (with opacity)

visibility itself cannot animate smoothly, but it's often paired with opacity.

Smooth fade

.fade {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.fade.show {
  opacity: 1;
  visibility: visible;
}

🧪 Real-World Examples

1️⃣ Tooltip Show/Hide

Tooltip example

.tooltip {
  visibility: hidden;
  opacity: 0;
  transition: 0.2s;
}

.button:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

2️⃣ Dropdown Menu

Dropdown

.dropdown ul {
  visibility: hidden;
}

.dropdown:hover ul {
  visibility: visible;
}

3️⃣ Hiding Items Without Breaking Layout

Reserved space

.label {
  visibility: hidden;
}

⚠️ When NOT to Use visibility

  • ❌ For removing elements — use display: none
  • ❌ For layouts (Grid/Flexbox already handle spacing)
  • ❌ For accessibility hiding — use hidden attribute or aria-hidden

🔥 Summary

The visibility property controls whether an element is visually shown while keeping or removing its layout space. It's perfect for dropdowns, tooltips, transitions, and situations wheredisplay: none would cause layout shifts.

>>“Use visibility to hide without breaking the layout.”

Learn more →MDN Docs 📘