title: Cannot hide the underlying div with opacity set to 1
body: <p>This is what I see right now.</p>
  
  <p><a href="https://i.stack.imgur.com/1LFUk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1LFUk.png" alt="enter image description here"></a></p>
  
  <p>What I would like to see is that the div with text 'Top' should totally eclipsed the 'Under' div.</p>
  
  <p>Here is my code (<a href="http://codepen.io/kongakong/pen/MKzmMm" rel="nofollow noreferrer">available in codepen</a>):</p>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>$(document).ready(function () {
    init();
  });
  
  function init() {
    $('input').on('click',
      function () {
        $('.answer').addClass('textout');
      });
  }
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>.row {
    overflow-x: hidden;
  }
  
  .hidden {
    display: none;
  }
  
  
  .answer {
    width:100%;
    position: absolute;
    opacity: 1;
    z-index: 100;
  }
  
  .answer-new {
    position: absolute;
     /* border: 1px solid blue;*/
     width: 100%;
    z-index: 1;
  }
  .textout {
    position: absolute;
    margin: 0;
    left: 0;
    transform: translateX(1000px);
    transition: transform 2s ease-in;
  }
  </code></pre>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div class="contrainer"&gt;
    &lt;div&gt;
      &lt;input type='button' value="test"&gt;&lt;/input&gt;
    &lt;/div&gt;
  
    &lt;div class="row"&gt;
      &lt;div class="answer-new"&gt;Under
  
      &lt;/div&gt;
      &lt;div class="answer"&gt;Top
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>My question:</p>
  
  <p>Is <code>opacity</code> the right way to hide another div in this situation? What is the right approach? I want to keep the 'Under' div visible because the css transform is supposed to achieve  a 'reveal' effect </p>