FAQ: The Box Model - Visibility

Frequently Asked Questions CSS FAQ
1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

This community-built FAQ covers the “Visibility” exercise from the lesson “The Box Model”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn CSS

FAQs on the exercise Visibility

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

2

Elements can be hidden from view with the visibility property. Why would someone choose to hide an element? If I don’t want it to be shown, shouldn’t I use the block comment /* instead?

2 Likes
3

Much of what we access on the web today is dynamic in nature, that means immediate change in view occurs with every listened for event. Take for instance a menu that is out of sight until the user hovers on a hamburger icon, then pops into view.

Mind, this would not be a use for visibility but display. The latter takes the object completely out of normal flow, the former does not.

visibility applies to a defined object and does not alter its position in normal flow. If it has dimensions, it will take up space, whether visible or hidden. Where this comes into play is when we have a defined layout and we don’t want it jumping around, but stable, with everything maintaining its position.

Say for instance our code displays messages at various intervals or upon given events and outcomes that we don’t want to display for very long. Popping in a message will cause the lines below that point to shift in order to make room for the message to fit in. visibility protects the real estate that message needs to display. When the message is gone, the space remains, but is unoccupied.

function timeOut(el) {
  setTimeout(() => {
    el.textContent = '';
  }, 2000);
};

The above nulls out a string, but also causes the line it was written on to also drop out. Content below jumps up.

function timeOut(el) {
  el.style.visibility = 'visible';
  setTimeout(() => {
    el.style.visibility = 'hidden';
  }, 2000);
};

will hide the textContent but will not give up the line. Mind, we can still collapse if we so desire. In either case, we do not manipulate the textContent. It gets set elsewhere.

4 Likes
4

I’ve tried to make a picture hidden and then become visible on hover, but failed to do so.

For example, this code wouldn’t work for me:

img {
  visibility: hidden;
}

img:hover {
  visibility: visible;
}

The picture just stays hidden, even on hover. Why?

5

What happens if you define the size of the container, make it hidden and not the img?

6

I’ve placed image in div container with id and tried again, but it stays the same — always hidden. I put the same width and height as my picture has.

Maybe I’ve done something wrong? Here’s how it looks in my code:

#image {
  visibility: hidden;
  width: 512px;
  height: 279px;
  margin: auto;
  padding: inherit;
}

#image:hover {
  visibility: visible;
}
7

Could it be that a hidden element is blind to mouse movement?

8

Seems that it is! I’ve searched further and found a solution. I needed to apply the hidden rule not on the element or a container, but on the element inside a container, and than to apply :hover pseudoclass on a container itself. After all, this code works fine:

HTML:

<div class="imagecont">
  <img src="image-url" >
</div>

CSS:

.imagecont img {
  visibility: hidden;
}

.imagecont:hover img {
  visibility: visible;
}

Thank you for a clue!

3 Likes
9

I’m curious about the ‘collapse’ value for visibility. What’s the function of entering collapse and how does it affect the rendering of the page?

10

The property is meant for small regions of the page, not wholesale real estate. Given three divisions with equal spacing around them within a parent container, having one visibility: collapse with remove that div and use the shared space between the remaining two. Collapse one more and that space is given over to the remaining div.

Using visibility: hide in that context will not give up the space of the hidden element, so will be blank until the element is restored.

2 Likes
11

Appreciate the insight, thanks.

1 Like
12

What is the difference between the visibility: hidden and visibility: collapse. Both of them when applied hides the element from the webpage, but reserves the space.

`

13

visibility: collapse is meant for tables and not all elements. All other elements it is treated as if it was set to hidden.

14

How does visibility: collapse differ from display: none please?

Using your example, with visibility: collapse, the parent container would remain the same size (with the extra space shared between the other two divs)…but display: none would cause the parent container to shrink and only take up enough space to display the two remaining divs? Is that it?

Otherwise I’m still struggling to understand the difference between the two other than using the former for small regions of the page and the latter for “wholesale real estate” (ha!). Thanks for your help!

1 Like
15 
    parent container
/                       \
| [ div ][ div ][ div ] |
| [   div   ][   div  ] |
| [        div        ] |
16

What does:" visibility: collapse; "do?