CSS caption caption hap с переходами

Question

Я пытаюсь реализовать наложение изображения на CSS, подобное этому example. У меня возникли проблемы с тем, чтобы наведите курсор на мои изображения.

Возможно, важно отметить, что я использую Zurb Foundation и класс «большой блок-сетка». Приветствия.

Мой HTML:

<div class="recent-work"> 
    <div class="row"> 
    <div class="large-12 columns"> 
     <ul class="large-block-grid-2"> 
     <li> 
     <a href="#"> 
      <div class="caption"><span>First Image Hover</span></div> 
      <img src="http://hhhhold.com/577x577"> 
     </a> 
     </li> 
     <li> 
      <a href="#"> 
      <div class="caption"><span>Second Image Hover</span></div> 
      <img src="http://hhhhold.com/577x577"> 
      </a> 
     </li> 
     </ul> 
    </div> 
    </div> 
</div><!-- End recent-work --> 

Мой CSS:

.recent-work { 
    margin: 0 0 50px; 
} 

// Img hovers 

.caption span { 
    top: 50%; 
} 

ul.large-block-grid-2 .caption { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    opacity: 0; 
    background-color: rgba(245, 64, 77, 0.75); 
    background-color: rgba(245, 64, 77, 0.25); 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(245, 64, 77, 0.25)), color-stop(100%, #f5404d)); 
    background-image: -webkit-linear-gradient(rgba(245, 64, 77, 0.25), #f5404d); 
    background-image: linear-gradient(rgba(245, 64, 77, 0.25), #f5404d); 
    -webkit-transition: all 0.2s linear; 
    -moz-transition: all 0.2s linear; 
    transition: all 0.2s linear; 
    -webkit-transform: translate3d(0, 0, 0); 
} 

ul.large-block-grid-2 .caption span { 
    padding: 1rem; 
    position: relative; 
    top: 52%; 
    opacity: 0; 
    color: white; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    -webkit-transition: all 0.4s ease; 
    -moz-transition: all 0.4s ease; 
    transition: all 0.4s ease; 
} 

ul.large-block-grid-2 a:hover .caption { 
    opacity: 1; 
} 

ul.large-block-grid-2 a:hover .caption span { 
    top: 48%; 
    opacity: 1; 
} 

Answer 1

Вот Fiddle

img { 
    width: 100%; 
    height: 100%; 
} 
ul li { 
    list-style: none; 
    float: left; 
    width: 400px; 
    height: 400px; 
    margin: 0 10px 10px 0; 
} 

ul.large-block-grid-2 .caption { 
    position: absolute; 
    display: inherit; 
    width: 400px; 
    height: 400px; 
    text-align: center; 
    opacity: 0; 
    background-color: rgba(245, 64, 77, 0.75); 
    background-color: rgba(245, 64, 77, 0.25); 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(245, 64, 77, 0.25)), color-stop(100%, #f5404d)); 
    background-image: -webkit-linear-gradient(rgba(245, 64, 77, 0.25), #f5404d); 
    background-image: linear-gradient(rgba(245, 64, 77, 0.25), #f5404d); 
    -webkit-transition: all 0.2s linear; 
    -moz-transition: all 0.2s linear; 
    transition: all 0.2s linear; 
    -webkit-transform: translate3d(0, 0, 0); 
}