visibility
Controls element visibility. Unlike display: none, hides visually while preserving layout space.
Class List
| Class | CSS | Description |
|---|---|---|
vh | visibility: hidden | Hide element. Space preserved, children can show with vv |
vv | visibility: visible | Show element. Override parent vh on children |
vi | visibility: initial | Reset to initial (visible). Release inherited visibility |
Visual Comparison
Compares visibility: hidden and visible effects.
visible (default value) —vv
All elements displayed normally
hidden (Item 2) — vh
Item 2 invisible but space preserved
vh vs dn — Hiding Method Comparison
vh and dn both hide elements, but key difference is space preservation.
visibility: hidden — vh
Space preserved. Item 2 position empty
display: none — dn
Space removed. Items 1 and 3 adjacent
| vh (visibility: hidden) | dn (display: none) | |
|---|---|---|
| Space Occupied | Occupied (empty space preserved) | Not occupied (completely removed) |
| Screen Reader | Not read | Not read |
| Receives Events | Not possible | Not possible |
| Transition | Possible (combined with opacity) | Not possible (on/off toggle) |
| Individual Child Display | Possible (add vv to child) | Not possible (all hidden) |
| Layout Impact | Occupies space, participates in layout | Completely removed, excluded from layout |
| Common Use Cases | Hide while keeping layout, fade animation | Responsive hiding, conditional rendering |
Individual Child Display
Unique to vh: even when parent is hidden, adding vv to a child shows that child. Not possible with dn.
parent vh + child vv
Only middle child shown with vv
Parent dn — individual child display impossible
With dn, all children hidden regardless of display value
Class Details
vhvisibility: hidden
Hides visually, preserving layout space. No events received. Adding vv to children shows them individually.
<!-- Hide element but maintain space -->
<div class="df gap8px">
<span>Item 1</span>
<span class="vh">Item 2 (hidden, space maintained)</span>
<span>Item 3</span>
</div>
<!-- Hide parent, show specific child only -->
<div class="vh">
<span>Hidden</span>
<span class="vv">Only this child is visible!</span>
<span>Hidden</span>
</div>
<!-- Combined with fade animation -->
<div class="vh o0 tall300msease hover-vv hover-o100">
Appears on hover
</div>Common Combinations
vh o0 | Hidden + transparent (fade-out state) |
vh pa | Hidden but absolute positioned (prevent space) |
vh pen | Hidden + pointer events blocked (double safety) |
sm-vh | Hidden only below 768px (space preserved) |
vvvisibility: visible
Makes element visible. Unnecessary alone (default), but used to show children when parent has vh or remove vh responsively.
<!-- Override parent vh in child -->
<nav class="vh">
<a href="#">Hidden</a>
<a href="#" class="vv">Only this link is visible</a>
<a href="#">Hidden</a>
</nav>
<!-- Responsive: hide on mobile, show on desktop -->
<div class="vh sm-vv">768px shown only below this breakpoint</div>Key Use Case
vv shines when overriding parent's vh on children. Unique to visibility, not possible with dn.
vivisibility: initial
Resets visibility to initial (visible). For resetting inherited visibility.
<!-- Reset inherited visibility -->
<div class="vh">
<p>This text is hidden</p>
<p class="vi">This text is reset to initial (visible)</p>
</div>Responsive Combinations
Combine with media query prefixes to hide/show at specific screen sizes.
<!-- Hide on mobile (maintain space) -->
<div class="vv sm-vh">Hidden at 768px and below (space maintained)</div>
<!-- Mobile only -->
<div class="vh sm-vv">768px shown only below this breakpoint</div>
<!-- Hide at tablet and below -->
<div class="vv md-vh">Hidden at 1024px and below</div>| Class Combination | Behavior |
|---|---|
vv sm-vh | Default visible → hidden below 768px (space preserved) |
vh sm-vv | Default hidden → visible below 768px |
vv md-vh | Default visible → hidden below 1024px |
vh md-vv | Default hidden → visible below 1024px |
vv lg-vh | Default visible → hidden below 1280px |
vh es-vv | Default hidden → visible below 640px |
Pseudo-class Combinations
Change visibility on hover, focus, etc.
<!-- Hide on hover -->
<div class="vv hover-vh tall200msease cp">
Disappears on hover (space maintained)
</div>
<!-- Show child on hover -->
<div class="pr hover-vv">
<span>Menu</span>
<ul class="pa t100p l0 vh hover-vv bg18181B b1pxsolid27272A br8px p16px lsn">
<li class="py4px">Item 1</li>
<li class="py4px">Item 2</li>
</ul>
</div>
<!-- Show on focus -->
<div class="vh focus-within-vv">
<input type="text" placeholder="Parent becomes visible on focus" />
</div>Tips & Notes
vh preserves space, dn removes space
Use vh to hide without layout shifts. Use dn to remove space entirely.
Individual child display only with vh
Apply vh to parent and vv to children to show only those children. Not possible with dn.
vh still affects layout
vh elements still occupy space, participating in layout calculations. Watch for unintended empty spaces.
Use with transitions
visibility is commonly used with opacity for fade animations. Opacity alone leaves events; vh also blocks events.