What are the ways to hide an element?

Brief Answer

There are several ways to hide an element in CSS:

display: none — completely removes from flow 🚫
visibility: hidden — hides but takes up space 👻
opacity: 0 — makes transparent 🔍
position: absolute with off-screen positioning 📍
clip-path — clips the element ✂️
transform: scale(0) — scales to zero 📏
height/width: 0 — removes dimensions 📐

/* Main methods */
.hidden-display { display: none; }
.hidden-visibility { visibility: hidden; }
.hidden-opacity { opacity: 0; }
.hidden-position { position: absolute; left: -9999px; }

Full Answer

Hiding elements is like magic tricks in a circus: you can make an element disappear completely, become invisible, or simply move it backstage! 🎪

Comparison of hiding methods

Method	Takes space	Accessible to screen readers	Events	Animatable
`display: none`	❌	❌	❌	❌
`visibility: hidden`	✅	❌	❌	✅
`opacity: 0`	✅	✅	✅	✅
`position: absolute`	❌	✅	✅	✅

1. display: none — complete removal

Element completely disappears from the document:

.element {
  display: none; /* Element doesn't exist in flow */
}
 
/* Show back */
.element.visible {
  display: block; /* or flex, inline, etc. */
}

<div class="box">Visible block</div>
<div class="box hidden-display">Hidden block</div>
<div class="box">Next block will move up</div>

2. visibility: hidden — invisible but takes space

.element {
  visibility: hidden; /* Invisible but takes space */
}
 
.element:hover {
  visibility: visible; /* Show on hover */
}

3. opacity: 0 — transparency

.element {
  opacity: 0; /* Completely transparent */
  transition: opacity 0.3s ease; /* Smooth appearance */
}
 
.element:hover {
  opacity: 1; /* Appears on hover */
}

4. Off-screen positioning

.sr-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
 
/* For accessibility */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

5. Modern methods

clip-path — element clipping

.element {
  clip-path: inset(50%); /* Clips element */
}
 
.element {
  clip-path: circle(0%); /* Circular clip to zero */
}

transform — transformations

.element {
  transform: scale(0); /* Scales to zero */
  transform: translateX(-100vw); /* Moves off-screen */
  transform: rotateY(90deg); /* Rotates edge-on */
}

Dimensions and overflow

.element {
  width: 0;
  height: 0;
  overflow: hidden; /* Hides content */
}
 
.element {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
 
.element.expanded {
  max-height: 200px; /* Smooth expansion */
}

Practical examples

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
 
.modal.active {
  opacity: 1;
  visibility: visible;
}

.dropdown {
  position: relative;
}
 
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(-10px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}
 
.dropdown:hover .dropdown-menu {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

Accordion

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
 
.accordion.active .accordion-content {
  max-height: 500px; /* Enough for content */
}

Accessibility and SEO

Hiding from screen readers

/* Hide from everyone, including screen readers */
.hidden {
  display: none;
}
 
/* Hide visually but keep for screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

ARIA attributes

<div aria-hidden="true">Hidden from screen readers</div>
<div hidden>Completely hidden (HTML5)</div>

Best practices

For animations — use opacity and transform 🎬
For accessibility — visually-hidden class 👁️
For performance — display: none for large blocks ⚡
For interactivity — visibility: hidden 🖱️

Common mistakes

❌ Wrong:

.element {
  opacity: 0;
  /* Events still work! */
}

✅ Correct:

.element {
  opacity: 0;
  pointer-events: none; /* Disable events */
}

Conclusion

Choice of hiding method depends on the task:

Complete removal → display: none
Smooth animations → opacity + transform
Preserve space → visibility: hidden
Accessibility → special classes for screen readers

Remember: each method has its own impact on layout, accessibility, and performance! 🎯