Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Hidden but space remains
Transparent (0 to 1)
Completely removed
Element is invisible but still takes up space. Cannot be clicked.
visibility: hidden;Element is invisible, takes up space, and can still be clicked!
opacity: 0;Element is completely removed from layout. No space, no interaction.
display: none;<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<h1>👁️ Visibility & Opacity Demo</h1>
<div class="section">
<div class="label label-blue">visibility: hidden</div>
<div class="boxes">
<div class="box box-1" onclick="handleClick('Box 1')">Box 1<br>Visible</div>
<div class="box box-2" onclick="handleClick('Box 2 - visibility:hidden')">Box 2<br>Hidden</div>
<div class="box box-3" onclick="handleClick('Box 3')">Box 3<br>Visible</div>
</div>
<div class="note">
⚠️ Notice: Box 2 is hidden but its space remains. Other boxes don't shift.
Try clicking where Box 2 should be - nothing happens!
</div>
</div>
<div class="section">
<div class="label label-purple">opacity: 0</div>
<div class="boxes">
<div class="box box-1" onclick="handleClick('Box 1')">Box 1<br>Visible</div>
<div class="box opacity-box" onclick="handleClick('Box 2 - opacity:0')">Box 2<br>Invisible</div>
<div class="box box-3" onclick="handleClick('Box 3')">Box 3<br>Visible</div>
</div>
<div class="note">
⚠️ Notice: Box 2 is invisible but takes space AND you can still click it!
Try clicking where Box 2 should be - the alert will fire!
</div>
</div>
<div class="section">
<div class="label label-red">display: none</div>
<div class="boxes">
<div class="box box-1" onclick="handleClick('Box 1')">Box 1<br>Visible</div>
<div class="box display-box" onclick="handleClick('Box 2 - display:none')">Box 2<br>Removed</div>
<div class="box box-3" onclick="handleClick('Box 3')">Box 3<br>Visible</div>
</div>
<div class="note">
✅ Notice: Box 2 is completely gone! Box 3 shifts left. No space, no interaction.
</div>
</div>
</div>
</body>
</html>Loading preview...
The opacity property accepts values from 0 (fully transparent) to 1 (fully opaque).
0Invisible
0.25Very faint
0.5Half transparent
0.75Slightly transparent
1Fully opaque
The pointer-events property controls whether an element can be clicked or not.
Element cannot be clicked, even if visible. Clicks pass through to elements below.
pointer-events: none;Default - element can be clicked normally.
pointer-events: auto;opacity: 0 with pointer-events: none to completely hide an element while keeping it in the DOM (useful for animations).