Создание нескольких изображений HTML/CSS

Question

Когда я пытаюсь поместить текст на несколько изображений, он появляется только на первом, так что он просто над кругами. Я не уверен, почему он это делает. Я начинаю использовать HTML/CSS. Демонстрационная версия доступна по адресу https://jsfiddle.net/mt4wc8xL/. Только "Text Two" появляется и не "Text One"

HTML:

<div class="container"> 
     <div class="thumbnail"> 
      <div class="movie"> 
       <a href="http://google.ca"> 
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYxGcPfqYK-tTFRFqZFMJ761adVBqV0_3N-cVltJcod_PfkTql" alt="dark knight"/> 
        <span class="text">The Dark Knight</span> 
       </a> 
      </div> 
      <div class="movie"> 
       <a href="http://google.ca"> 
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYxGcPfqYK-tTFRFqZFMJ761adVBqV0_3N-cVltJcod_PfkTql" alt="shutter island"/> 
        <span class="text">The Dark Knight</span> 
       </a> 
      </div> 
     </div> 
    </div> 

CSS:

.container { 
    background: white; 
    position: absolute; 
    height: 19em; 
    width: 45em; 
    border: 1px solid black; 
    overflow-x: hidden; 
    overflow-y: hidden; 
    white-space: nowrap; 
} 

img { 
    max-width: 100%; 
} 

.spacing{ 
    position: absolute; 
    top: 1em; 
    left: 1em; 
    width: 225px; 
    height: 220px; 
} 

.movie{ 
    width: 100%; 
    height: 100%; 
    display: inline-block; 
} 

.text{ 
    position: absolute; 
    bottom: -3em; 
    left: 0; 
    display: inline-block; 
    padding: 15px 5px 5px; 
    width: 170px; 
    color: white; 
    font-size: 15px; 
    text-shadow: rgba(0,0,0,0.5) 1px 1px 0; 
    font-family: sans-serif; 

    background-color: black; 
    background-position: left-bottom; 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
} 

Answer 1

position: absolute исправления в ближайший предок, который имеет position: relative

.movie{ 
    width: 100%; 
    height: 100%; 
    display: inline-block; 
    position: relative; /* add this */ 
} 

https://jsfiddle.net/mt4wc8xL/3/