Span Overlay On Image

Question

Я пытаюсь показать наложение на изображении при наведении. Вот часть моего кода:

 <div class="wrapper-showcase"> 
      <div class="first"> 
       <img src="showcase-1.png" /> 
       <span class="overlay"></span> 
      </div> 
      ... 
     </div> 

Вот это CSS:

   .wrapper-showcase div.first img { 
        width: 100%; 
        height: 100%; 
        z-index: -100; 
       } 

       .wrapper-showcase div.first span { 
        width: 100%; 
        height: 100%; 
        background: rgba(0,0,0,0.3); 
        display: inline-block; 
        left: 0; 
        top: -50%; 
        z-index: 100; 
       } 

Изображение потягивается, чтобы заполнить родительский DIV, но диапазон, который я хочу, чтобы отобразить только не показывает вверх. Он появляется ниже указанного изображения. Есть ли способ наложить их?

Answer 1

working demo Я добавил:

.first{ 
position:relative; 
} 

и я изменил срок

.wrapper-showcase div.first span { 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.3); 
    display: inline-block; 
    left: 0; 
    z-index: 100; 
    background-color:moccasin; 
    position:absolute; 
    top:0; 
} 

(я также добавил, background-color:moccasin, так что вы можете увидеть, что происходит)