<div class="hidden">
  Hi, I'm hidden. Notice that all of my styling is hidden as well, and that I still take up space, even though you can't see me.
  <div class="visible">
    Howdy, my parent element is hidden, but I'm still visible. <br>Hover over me to make my parent visible.
  </div>
</div>
@import "compass/css3";

.hidden {
  visibility: hidden;
  background: pink;
  border: 10px dotted teal;
  padding: 10px;
  &:hover {
    visibility: visible;
  }
}
.visible {
  border: 1px solid black;
  visibility: visible;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js