The Visibility Property

You can use the visibility property to control the visibility of an entire element. It can be used to make a layer visible or invisible. Why would anyone want to create an invisible layer?

For example, the VISIBILITY property can be used to simulate image maps, but with rollover effects. The VISIBILITY property is used in conjunction with layers, JavaScript, and dynamic pseudo-classes to create popup menus or other user-interaction components on the web page. Its primary purpose is to enable user-interaction on the web page.

With dynamic HTML it is possible to change the visibility of a layer according to certain events. The most common use of this is to create menus that pop out (like the sub menus in the START menu on Windows). The trick behind these menus is to create all submenus as invisible layers. Then, when a mouse-over is detected on a link the corresponding layer becomes visible. (Sounds pretty easy ... and actually is as long as we are using modern browsers that support CSS layers).

Syntax

visibility: visible | hidden | collapse | inherit

initial value:	visible
applies to:	all elements
inherited:	yes
computed value:	as specified

The three values of particular interest are:

visible

Quite simply, the element is visible.

hidden

The hidden value makes the element invisible. It is similar in effect to the display:none declaration, with one crucial difference:

When visibility:hidden is applied to an element, the space occupied by the element remains, so the layout of the document is unaffected.

In contrast, display:none removes the element from the document layout. When it is not displayed, neighboring elements will close the space previously occupied by the element. When the element is displayed, adjacent elements shift to make space for the displayed element.

collapse

The collapse value is specifically for table rendering. It is used to remove entire table rows or columns from the display. If used on non-table elements, it has the same effect as visibility:hidden.

In chapter 4 "Positioning Elements" in the Stylin' book, you read about the display property. The visibility property is similar in function and sometimes can be used interchangeably with the display property, though the display property should be used judiciously, as it has an effect on the layout.

visibilty specifies whether an element box generated by an element is rendered (visible). The element box occupies space in the layout whether or not it is visible.
display is used to define the kind of display box an element generates during layout. We will discuss this in greater detail when we use lists for navigational elements. As mentioned above, if the declaration display:none is applied to an element, the non-displayed element does not occupy any space in the layout.
The visibility property is inherited; the display property is not.

Example

This simple example uses the visibility property and the :hover pseudo-class to create a popup image effect.

Style sheet

#popupImageExample {
  position: relative;
  }
 
#popupImageExample p {
  width: 200px;
  height: 5em;
  padding: 1em 25px 0;
  color: white; background-color: blue;
  font-family: verdana, helvetica, arial, sans-serif;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  }
 
#popupImageExample .popup {
  width: 250px; height: 6em;
  position: absolute; top: 0;
  z-index: 20;
  }
 
#popupImageExample .popup img,
#popupImageExample .popup p {
  visibility: hidden;
  position: absolute;
  }
 
#popupImageExample .popup:hover img {
  visibility: visible;
  position: absolute; top: 0; left: 270px;
  z-index: 10;
  }
 
#popupImageExample .popup:hover p {
  visibility: visible;
  position: absolute; top: -2em; left: 270px;
  z-index: 15;
  width: 399px;
  color: white;
  background-color: transparent;
  text-align: left;
  font-style: italic;
  font-size: 2em;
  }

Markup

<div id="popupImageExample">
  <p id="hitArea">Roll over this spot for a surprise!</p>
  <div class="popup">
    <img src="images/kazul-small.jpg" alt="lounging kitty" />
    <p>Hi, it's me again!</p>
  </div>
</div>

This is the rendered result. Simply hover over the blue rectangle and an image will appear.

Roll over this spot for a surprise!

This effect is called a remote rollover. In other words, the effect occurs at a different position in the document than the "hot spot" that triggers the effect. This was a very basic example to demonstrate how the visibility property can be used for user interactive effects. Remarkably, this effect was accomplished purely with CSS and no JavaScript. Let's examine the approach for creating this effect.

First, I created a parent DIV called "popupImageExample". This DIV is used to provide positioning context for all the elements used in this effect.

Next, I created a non-dynamic paragraph, "hitArea". I call this a non-dynamic paragraph because there are no user-action behaviors applied to this element. This paragraph merely provides a visual 'hit area' for the user—I've styled this paragraph with a blue background, width and height to make it a user-friendly 'hit area'. This is a purely non-dynamic element, and only provides a way for the user to locate the actual 'hit area', which is invisible. All dynamic effects are actually applied to the "popup" DIV that I will describe next.

The popup DIV is inside the popupImageExample DIV. This is the core of the dynamic image effect. This DIV provides a 'hot spot' for mouse actions; this is the area which will react to the cursor as it passes over the document.

Space the numbering of z-index layers so that you can easily insert new layers between existing layers without needing to renumber all the layers.

As I mentioned, since all the elements in the popup DIV are hidden initially, the hitArea paragraph provides a visible element for the user interface. The popup DIV is styled so that the size approximates the size of the hitArea paragraph. Its position is set so that the popup DIV shares the same position in the document as the hitArea paragraph; the Z-INDEX is set to 20 so that it occupies a layer on top of the hitArea paragraph. This is necessary so that mouse actions will be registered by the popup DIV, and not the hitArea paragraph.

Initially, the IMG and P elements in the popup DIV are hidden, and absolutely positioned; thus, they are invisible.

In order for the image to become visible, a :HOVER state is declared for the popup DIV, used with descendant selectors that target the IMG and P elements within the popup DIV. These rules make the invisible image and accompanying text visible when the user moves the cursor over the popup DIV. The image and its text is positioned to the right of the popup DIV, and Z-INDEXes are declared to ensure that image and text are properly stacked.

... all that just to make an image appear! Of course, this technique can be extended to a variety of purposes. Visit the links below for more examples of applications of the visibility property.

Resources

Remote Rollover Demo . Andy Budd.
Remote Rollover Demo . Douglas Bowman, Stopdesign. Click on the page to view the rollover demo. Click on the navigation arrows at the upper right of the pages to view the slideshow to see how the effect is accomplished.
Pure CSS Rollovers . Bokehman.com
Example image map simulation with rollover effects , CSS Play, Stu Nichols
Interactive demo of the visibility property. Add any desired styles or HTML in the text area. Click the Refresh button to view the result.
Dynamic Text Replacement , A List Apart.
CSS Image Maps , A List Apart.
Visibility Property , CSS: The Definitive Guide, 1st Edition, Eric Meyer
Visibility , W3C CSS 2.1 Specification
Dynamic Row and Column Effects , W3C CSS 2.1 Specification
Example of drop down menus using the visibility property , Code Style

Manipulating Visibility