CSS - Visibility: Making Elements Appear and Disappear

Hello there, aspiring web developers! Today, we're going to dive into the fascinating world of CSS visibility. As your friendly neighborhood computer teacher, I'm excited to guide you through this journey. By the end of this tutorial, you'll be able to make elements vanish and reappear like a true CSS magician!

CSS - Visibility

What is CSS Visibility?

Before we start waving our CSS wands, let's understand what visibility is all about. In the simplest terms, CSS visibility controls whether an element is visible or hidden on a web page. It's like playing hide and seek with your HTML elements!

Possible Values

Let's take a look at the different values we can use with the visibility property:

Value	Description
visible	The element is visible (this is the default)
hidden	The element is hidden, but still takes up space
collapse	Used mainly for table elements, we'll cover this!
inherit	Inherits the visibility from its parent element

Applies to

The visibility property can be applied to all HTML elements. Yes, you heard that right - all of them! From divs to paragraphs, images to tables, you name it, and visibility will work its magic.

DOM Syntax

Now, let's see how we can use visibility in our CSS:

element {
  visibility: value;
}

Simple, right? Replace 'element' with the HTML element you want to target, and 'value' with one of the visibility values we discussed earlier.

CSS visibility - visible Value

Let's start with the default value, 'visible'. Here's an example:

<div class="visible-box">Can you see me?</div>

<style>
.visible-box {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  visibility: visible;
}
</style>

In this example, we've created a light blue box with the text "Can you see me?". The visibility is set to 'visible', which means... you guessed it, the box is visible! This is the default behavior, so even if we didn't specify the visibility, the result would be the same.

CSS visibility - hidden Value

Now, let's make things disappear! Here's how we use the 'hidden' value:

<div class="hidden-box">Now you see me...</div>
<div class="visible-box">Now you don't!</div>

<style>
.hidden-box {
  width: 200px;
  height: 100px;
  background-color: lightpink;
  visibility: hidden;
}
.visible-box {
  width: 200px;
  height: 100px;
  background-color: lightgreen;
}
</style>

In this example, we have two boxes. The first one is set to 'hidden', so it won't be visible on the page. However - and this is important - it still takes up space! The second box will appear right after the invisible space of the first box.

This is different from display: none, which removes the element from the layout entirely. Think of 'hidden' as an invisibility cloak - the element is still there, you just can't see it!

CSS visibility - collapse Value

The 'collapse' value is a bit special. It's primarily used for table elements. Let's see it in action:

<table>
  <tr>
    <td>I'm visible!</td>
    <td class="collapsed">I'm collapsed!</td>
    <td>I'm visible too!</td>
  </tr>
</table>

<style>
table {
  border-collapse: collapse;
}
td {
  border: 1px solid black;
  padding: 5px;
}
.collapsed {
  visibility: collapse;
}
</style>

In this example, the middle cell of our table row is set to 'collapse'. This means it will be hidden, and the space it would have occupied will be taken up by the surrounding cells. It's like the cell never existed!

CSS visibility - Collapse On Nontable Elements

Now, you might be wondering, "What happens if I use 'collapse' on a non-table element?" Good question! The behavior can vary between browsers, but generally, it will act the same as 'hidden'. Let's try it:

<div class="normal">I'm a normal div</div>
<div class="collapsed">I'm a collapsed div</div>
<div class="normal">I'm another normal div</div>

<style>
.normal {
  background-color: lightyellow;
  margin: 5px;
  padding: 5px;
}
.collapsed {
  background-color: lightcoral;
  margin: 5px;
  padding: 5px;
  visibility: collapse;
}
</style>

In most browsers, the 'collapsed' div will behave as if it had visibility: hidden. It won't be visible, but it will still take up space.

CSS visibility - Transition Effects

Here's where things get really fun! We can use CSS transitions to create smooth visibility effects. Check this out:

<div class="magic-box">Hover over me!</div>

<style>
.magic-box {
  width: 200px;
  height: 100px;
  background-color: lavender;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s, visibility 0.5s;
}
.magic-box:hover {
  visibility: hidden;
  opacity: 0;
}
</style>

In this example, when you hover over the box, it will smoothly fade out and become invisible. When you move your mouse away, it will fade back in. We've combined visibility with opacity to create this effect. Cool, right?

And there you have it, folks! You've just learned the ins and outs of CSS visibility. Remember, with great power comes great responsibility. Use your new visibility skills wisely, and your web pages will thank you!

Before we wrap up, here's a little joke for you: Why did the CSS element go to therapy? It had too many hidden issues! ?

Happy coding, and may your elements always be visible when you want them to be!

Credits: Image by storyset