title: CSS Overflow:auto hiding absolutely positioned child elements that exceed parent size
body: <p>I have a DIV that will be the width of the page but the contents may be too wide to fit. I've set up overflow-x:auto for it so that the contents are scrollable.
  My problem is that I'd like to make each of the child divs expand and be visible when you hover on them but they are currently clipped if they exceed the parent div.</p>
  
  <p>Here's <a href="https://jsfiddle.net/Lepp23z0/" rel="nofollow">the jsfiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div class='Content'&gt;
  &lt;div class='ImageContainer'&gt;
      &lt;div class='Image'&gt;Container 1&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='ImageContainer'&gt;
      &lt;div class='Image'&gt;Container 2&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='ImageContainer'&gt;
      &lt;div class='Image'&gt;Container 3&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='ImageContainer'&gt;
      &lt;div class='Image'&gt;Container 4&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='ImageContainer'&gt;
      &lt;div class='Image'&gt;Container 5&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='ImageContainer'&gt;
      &lt;div class='Image'&gt;Container 6&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='ImageContainer'&gt;
      &lt;div class='Image'&gt;Container 7&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='ImageContainer'&gt;
      &lt;div class='Image'&gt;Container 8&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='ImageContainer'&gt;
      &lt;div class='Image'&gt;Container 9&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='ImageContainer'&gt;
      &lt;div class='Image'&gt;Container 10&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS</p>
  
  <pre><code>.Content {
      overflow-x:auto;
      overflow-y:hidden;
      white-space:nowrap;
  }
  .ImageContainer {
      position:relative;
      width:100px;
      height:150px;
      display:inline-block;
  }
  .Image {
      position:absolute;
      left:0;
      top:0;
      right:0;
      bottom:0;
      z-index:1;
      border:1px solid black;
      background-color:#AAA;
  }
  .Image:hover {
      left:-10px;
      top:-10px;
      right:-10px;
      bottom:-10px;
      z-index:2;
  }
  </code></pre>
  
  <p>Padding the "content" div is a work-around, but doesn't really fix my problem. Any CSS gurus out there with a few seconds to waste? I know this is probably simple to fix. Thanks!</p>