title: Overlay on Responsive Image for horizontal Image
body: <p>I am trying to create an overlay for responsive images in a horizontal gallery.
  The overlay <code>div</code> in the <code>li</code> has <code>position</code> and a large <code>z-index</code> value but still displays on background of the image.
  When I try to do <code>absolute</code> for an image with higher <code>z-index</code> the horizontal scrolling for image fails.</p>
  
  <p>See the demo: <a href="https://jsfiddle.net/r6hho2sL/">Jsfiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    min-height: 100%;
    height: 100%;
  }
  body {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  #thumbsList {
    height: 76%;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    line-height: 0px;
    top: 13%;
    left: 80px;
    list-style-type: none;
    top: 13%;
    position: absolute;
  }
  #thumbsList li {
    display: inline;
    position: relative;
  }
  #thumbsList li img {
    max-width: 100%;
    height: 100%;
    transition: all 0.8s ease;
  }
  .Absolute-Center {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  .backStrip {
    background-color: #2d2d2d;
    border-bottom: 1px solid #1a1a1a;
    height: 35px;
    position: relative;
    z-index: 22;
    position: fixed;
    width: 253px;
    top: 43px;
    height: 79px;
    left: 85px;
  }
  #infoText {
    color: white;
    font-style: italic;
    padding-top: 10px;
    float: right;
    margin-right: 10px;
    font-family: sans-serif;
    font-size: 12px;
  }
  #mainContainer {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 8px solid #2D2D2D;
    margin: 0px;
    overflow-x: auto;
  }
  #thumbsButtons {
    list-style: none;
    position: fixed;
    bottom: 6%;
    left: 46%;
    z-index: 22;
  }
  #counterContainer {
    position: fixed;
    bottom: 5%;
    left: 50%;
    right: 50%;
    font-family: verdana;
    font-weight: bold;
    width: 100px;
  }
  #thumbsButtons li {
    float: left;
    margin-left: 11px;
    font-size: 16px;
    font-family: verdana;
  }
  #thumbsButtons li:hover {
    cursor: pointer;
  }
  #nextArrow {
    position: fixed;
    right: 10px;
    top: 43%;
    z-index: 13333;
    font-size: 100px;
    color: white;
    font-family: helvetica;
    cursor: pointer;
  }
  #sidelogo {
    position: absolute;
    z-index: 10;
    top: 35%;
    left: 0%;
    width: 67px;
    height: 258px;
    background-color: #2D2D2D;
  }
  .headerInfo {
    position: absolute;
    bottom: 22px;
    color: white;
    z-index: 333;
    font-family: verdana;
    font-size: 17px;
    text-align: center;
  }
  .thumbOverlay {
    position: absolute;
    z-index: 13111133;
    background-color: black;
    color: white;
    height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
    display: inline;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="mainContainer"&gt;
    &lt;div class="backStrip"&gt; &lt;span id="infoText"&gt;Written By Banmeet Singh&lt;/span&gt;
  
    &lt;/div&gt;
    &lt;ul id="thumbsButtons"&gt;&lt;/ul&gt; &lt;span id="nextArrow"&gt;&gt;&lt;/span&gt;
    &lt;span id="sidelogo"&gt;Thinking Forward&lt;/span&gt;
  
    &lt;ul id="thumbsList"&gt;
      &lt;li&gt;
        &lt;img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" /&gt; &lt;span class="headerInfo"&gt;Josh Kloss&lt;/span&gt;
  
      &lt;/li&gt;
      &lt;li&gt;
        &lt;div class="thumbOverlay"&gt;&lt;span&gt;adasd&lt;/span&gt; 
        &lt;/div&gt;
        &lt;img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" /&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" /&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;img class="forward" src="http://placehold.it/200x100" alt="Alternate Text" /&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" /&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;img class="forward" src="http://placehold.it/200x100" alt="Alternate Text" /&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;div id="counterContainer"&gt;3 of 10&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Check the Second Image. I have added the overlay to that.</p>