html - CSS hover text over image on hover -

i following tutorial hover effect on images text pops , background turns dark. tutorial here.

i having small problem hover effect, when mouse hovers on image, want image go dark , entire image covered, when set ul.img-list li height 100% takes 100% of text, can set height height of image, when height changes based on window size, won't cover properly. missing something?

html:

<div class="column large-6">    <ul class="img-list">      <li>        <a href="#">          <img src="https://www.ricoh.com/r_dc/r/r8/img/sample_08.jpg" />          <span class="text-content">            <span>hello@!</span>         </span>       </a>     </li>  </ul> 

css:

ul.img-list {   list-style-type: none;   margin: 0;   padding: 0;   text-align: center; } ul.img-list li {   display: inline-block;   height: 100%;   margin: 0 1em 1em 0;   position: relative;   width: 100%; } span.text-content {   background: rgba(0,0,0,0.5);   color: white;   cursor: pointer;   display: table;   height: 150px;   left: 0;   position: absolute;   top: 0;   width: 150px; }  span.text-content span {   display: table-cell;   text-align: center;   vertical-align: middle; }  span.text-content {   background: rgba(0,0,0,0.5);   color: white;   cursor: pointer;   display: table;   height: 100%;   left: 0;   position: absolute;   top: 0;   width: 150px;   opacity: 0;   -webkit-transition: opacity 500ms;   -moz-transition: opacity 500ms;   -o-transition: opacity 500ms;   transition: opacity 500ms; } 

here jsfiddle - http://jsfiddle.net/f32kn4h5/

i think part of problem after looking @ fiddle none of parent divs have height property set static. if try changing span styling say, 300px, see change:

span.text-content {   height: 300px; } 

alternatively, set every parent of text span's height 100% or something, height must present every parent:

<div class="column large-6"> //set 100% or    <ul class="img-list">  //set 100% or      <li>  //set 100% or        <a href="#">          <img src="https://www.ricoh.com/r_dc/r/r8/img/sample_08.jpg" />          <span class="text-content">            <span>hello@!</span>         </span>       </a>     </li>  </ul> 

this should make work, here's update fiddle: http://jsfiddle.net/f32kn4h5/3/