Let's imagine the following scenario: You have an element that should be hidden but one of the elements inside it should be visible. I'm sure everyone has had this problem before and tried to force it with opacity. At least I did. But that's not possible. As soon as you set an element to opacity: 0; all of it's children will forever be invisible.
Same with display: none;. You can't set a children back to display: block;.
But a while back I learned that visibility actually behaves differently. You can set visibility: hidden; for a parent element and show a children element with visibility: visible.
Hope this helps!
