title: Hide on :hover, DIV over DIV
body: <p>I have a DIV on top of another DIV.</p>
  
  <p>What I want to achieve is hide the DIV on top to be able to access the DIV below.</p>
  
  <p>I've tried opacity, but since the top DIV is still there, just transparent, It won't allow me to interact with the content of the DIV below.
  I've also tried display:none;, visibility: hidden; and z-index. None of those would work.</p>
  
  <p>How do I achieve this with CSS3, so I can also use a transition?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;li class="panel-box"&gt; 
      &lt;div class="front box-style"&gt; &lt;/div&gt;
      &lt;div class="back"&gt; &lt;/div&gt; 
  &lt;/div&gt; &lt;/li&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.panel-box {
      margin: 5px;
      padding: 0;
      display: inline-block;
      clear: none;
      float: left;
      width: 310px;
      height: 200px;
      position: relative;
  }
  
  .box-style {
      background-color: red;
  }
  
  .front {
      width: 310px;
      height: 200px;
      z-index: 5;
      opacity: 0;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
  }
  
  .front:hover {
      opacity: 0;
      display: none;  
  }
  
  .back {
      width: 310px;
      height: 200px;
      background-color: rgba(57, 54, 55, 0.95);
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
  }
  </code></pre>
  
  <p>Thanks a bunch.</p>