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.
I'm not visible
I'm not visible
See the Pen uLJEx by Martin Wolf (@martinwolf) on CodePen.
Same with display: none;. You can't set a children back to display: block;.
I'm not visible
I'm not visible
See the Pen rnFam by Martin Wolf (@martinwolf) on CodePen.
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.
I'm not visible
I'm visible
See the Pen IyEeb by Martin Wolf (@martinwolf) on CodePen.
Hope this helps!
