Controlling the element visibility

The visibility property

The visibility of each element can be controlled by the visibility property with following syntax:

visibility: visible or hidden

By default, the visibility of each element is set to visible. Note that even if you hide the element during composing your document, the browser will still allocate a space for it as the element would be visible. This relates, however, only to relatively of inline positioned elements.

This is a test paragraph positioned relatively. Click the button below to hide it.

Since the absolutely positioned elements are taken from the normal flow of the document rendering, no space is reserved for them, and this does not depend on their initial visibility. Click the button below to show an initially hidden absolutely placed element.

The opacity property

By default, all objects on a Web page are filly opaque. The opacity can be modified by using the following syntax:

opacity: value;

Here the value is a number between 0.0 (fully transparent) and 1.0 (fully opaque). The opacity allies across the entire element, including its border and background. For this feature to work with the Internet Explorer, add one more line as in the example below.

opacity: 0.6;
filter: alpha(opacity=60);

The value of the opacity in the second line should be in percentages, however no percentage sign should be provided. The Firefox browser just ignores the second line. See how it works on an example of styling the opacity for the 5 absolutely positioned DIV blocks.

opacity: 1.0
opacity: 0.8
opacity: 0.6
opacity: 0.4
opacity: 0.2