Four Ways to Make Elements Disappear (And Reappear) Using CSS

As web pages become more active and dynamic, we desire content to appear and disappear at will. There are four properties typically used to accomplish this: three of them standard to CSS 1 and 2, and the other in CSS3.

It’s notable that JavaScript, whether employed as a framework or not, will use these exact same techniques to animate or disappear elements. Remember, only CSS can alter the appearance of elements on the page: JavaScript is just one way of manipulating CSS.

Each technique has its uses, along with its own advantages and disadvantages. It’s also common to employ more than one technique at the same time; where appropriate, I have linked to examples.

I’ll be applying the CSS in each example to the same basic code:

1. <p>Dice used for traditional Dungeons &amp; Dragons games are actually
2. reflections of the five Platonic solids: the tetrahedron (4 sided die), octahedron
3. (8 sides), dodecahedron (12)and icosahedron (20 sides).
4. <img src=”dice.jpg” alt=”D & D dice” title=”D & D dice” id=”dice” /></p>
5. <p>The dice are used to determine the attributes of characters, and the
6. character’s success or failure in undertaking tasks, challenges, casting spells,
7. attacks and defines.</p>

The original CSS applied to the image is:

1. img#dice { float: right; margin-left: 2em; }

The techniques are:

visibility: hidden

1. img#dice { float: right; margin-left: 2em; visibility: hidden; }

The obvious choice, and often the first employed. It works – you can’t see the influenced element – but the rest of the page still acts like the element is there; it is simply treated as being invisible, while taking up space.

Used for: “popping” elements in and out of existence, when an animated transition effect is not required.

Countered by: setting the element to visibility: visible.

opacity: 0

1. img#dice { float: right; margin-left: 2em; opacity: 0; }

A CSS3 property, setting opacity to 0 causes an element to be invisible, in the exact same way that visibility: hidden does. opacity the advantage that, unlike visibility, it can be transitioned and animated via JavaScript or CSS3.

Used for: creating “fade in” and “fade out” effects.

Countered by: setting the element to opacity: 1 (or any value greater than 0).

position: absolute

1. img#dice { position: absolute; left: -1000px; }

The oldest and most standardized of the techniques. Takes the element out of the flow of the page, causing it to layer above ordinary content. Using a high negative left value takes it off the page entirely.  float and margin are irrelevant with position: absolute, so they are removed.

Used for: Linear animation; “pop” placement of elements with the greatest compatibility between browsers.

Countered by: setting the left position to a value that allows the element to be seen on the page.

display: none

1. img#dice { display: none; }

The second-oldest of the techniques. Might be thought of as a compromise between position: absolute and visibility: hidden; the element is both invisible and no longer influences other content on the page.

Used for: stylesheets for alternative media, to eliminate inappropriate content; as a way of “collapsing” content around an element that will be “pushed” when it re-appears, as in an accordion menu.

Countered by: setting the element to display: block or any other value.

There are other ways of making elements vanish, especially in CSS3 – for example, you could use scale to diminish the apparent size of an element until it is invisible – but on the whole they have the same effect as those I have described here. (scale will retain the original space of the element, just as opacity: 0 and visibility: hidden do).