Overlay on Responsive Image for horizontal Image

Question

I am trying to create an overlay for responsive images in a horizontal gallery. The overlay div in the li has position and a large z-index value but still displays on background of the image. When I try to do absolute for an image with higher z-index the horizontal scrolling for image fails.

See the demo: Jsfiddle

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;
}

<div id="mainContainer">
  <div class="backStrip"> <span id="infoText">Written By Banmeet Singh</span>

  </div>
  <ul id="thumbsButtons"></ul> <span id="nextArrow">></span>
  <span id="sidelogo">Thinking Forward</span>

  <ul id="thumbsList">
    <li>
      <img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" /> <span class="headerInfo">Josh Kloss</span>

    </li>
    <li>
      <div class="thumbOverlay"><span>adasd</span> 
      </div>
      <img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" />
    </li>
    <li>
      <img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" />
    </li>
    <li>
      <img class="forward" src="http://placehold.it/200x100" alt="Alternate Text" />
    </li>
    <li>
      <img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" />
    </li>
    <li>
      <img class="forward" src="http://placehold.it/200x100" alt="Alternate Text" />
    </li>
  </ul>
  <div id="counterContainer">3 of 10</div>

Check the Second Image. I have added the overlay to that.

Answer 1

#thumbsList li {
    display: inline-block;
    position: relative;
}

are you expecting this kind of result? see jsFiddle

Answer 2

Check this out: https://jsfiddle.net/r6hho2sL/11/

here I made some modifications to your code:
1. I used JQuery to adjust the width of the overlay element on window re-size event so that it would keep its responsive behavior

$( window ).resize(function() {
  $( ".thumbOverlay" ).width($(".forward").width());
});
$( ".thumbOverlay" ).width($(".forward").width());

2. I used (divs and spans) instead of list (ul and li)

3. I modified the css classes

   .thumbOverlay {
       top: 0;
       position: absolute;
       z-index: 13111133;
       background-color: black;
       color: white;
       height: 100%;
       display: inline;
   }
   
   #thumbsList span {
   display: inline;
   margin-left: -4px;
   }
   

Answer 3

Marc Andre, your fiddle(s) code is, unfortunately, rather leaky and inconsistent. So, instead of patching and rearranging it, I took the liberty of starting from scratch staying as close to your original idea as possible.

For a quick look, check my Pen on CODEPEN Responsive filmstrip and thumblist

Where did you go wrong? First of all, I don't intend to pick on you, I am just being honest:

You didn't use 'position' correctly on your elements, which (probably) resulted in a confusing (hair-pulling, I guess) onscreen output.

Two general rules:

1) parent-element => position: relative, child-element => position: absolute. Both can have any kind of width/height (%, px), but the child values are relative to the parent-element.

2) child-element => position: fixed. Width/height/position are relative to the browser window, ALWAYS.

You mixed the two rules and got yourself running in circles. To break free you should do:

/* Generally accepted (and working) init of HTML and BODY */
html, body         { width: 100%; height: 100%; margin: 0; padding: 0 }
body               { max-width: 100%; margin: 0 auto }
/* margin: 0 auto will center BODY onscreen if max-width < 100% */


#thumbsList        { position: absolute /* relative to BODY!!! which is a parent */ }

#thumbsList li     { position: relative /* while a child of UL, it is a parent of IMG */ }

#thumbsList li img { position: absolute /* child of LI absolute coords relative to LI */ }

No further 'position'ing should be needed for #thumbslist (only sizing, styling and such). Again unfortunately, because of the number of (logic) errors, your CSS requires to be redesigned (IMHO that is).

UPDATE

As you may have seen by now, the code works on Codepen and standalone in the latest IE11, FF and CH (all W7, I still need to check mobile).

What I essentially created is a strip of stacked flexbox layout layers. Once you master the flexbox techniques, you wil see that it has lots of advantages over regular (inline-)block techniques. Drawbacks too, I will point them out where applicable.

To easily understand my (very down to earth) flexbox workflow I always ask what basic layout is needed:

• a column of rows or a row of columns
• wrapping or not
• justification (often justify-content: space-between, you may want to read into this)

Nesting and trickery will come later...

Dissecting your requirements: you actually need a regular webpage, but instead of nicely placed blocks, you need them stacked, hence the need for layers