Related to opacity are the visibility and display tags

Visibility

The visibility tag has basically two options: visible and hidden.

Source:

<div style="visibility: visible">
<img src="metropolis-robot.jpg" width="207" height="196" alt="metropolis-robot" />
</div>

Web page:

Source:

<div style="visibility: hidden">
<img src="metropolis-robot.jpg" width="207" height="196" alt="metropolis-robot" />
</div>

Web page:

Combined with a small JavaScript, visibility can be toggled on and off:

Web page:

Show Hide

Head:

<script type="text/javascript">
function visibilityHidden() {
document.getElementById("robot").style.visibility="hidden";
}
function visibilityVisible() {
document.getElementById("robot").style.visibility="visible";
}
</script>

Body:

<div id="robot">
<img src="metropolis-robot.jpg" width="207" height="196" alt="metropolis-robot" />
</div>
<div style="text-align: center"><a href="javascript:;" onClick="visibilityVisible('robot')">Show</a>
<a href="javascript:;" onClick="visibilityHidden('robot')">Hide</a></div>

Note that the visibility tag hides the element but does not remove the space that it takes up on the page. The display tag can be used to conceal both.

Display

The display tag can control several display options (inline, block, etc.) but what we're interested here is display:none.

Source:

<div style="display:block">
<img src="robby.jpg" width="150" height="166" alt="robby" />
</div>

Web page:

Source:

<div style="display:none">
<img src="robby.jpg" width="150" height="166" alt="robby" />
</div>

Web page:

The ability to hide and reveal portions of your Web content opens up a wide range of possibilities for presentation.