带有过渡的CSS图像标题悬停

Question

I have been trying to implement a CSS image hover similar to this example . I'm having trouble getting the hover to contain to my images.

It's probably important to note that I'm using Zurb Foundation and the 'large-block-grid' class. Cheers.

My 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 -->

My 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

Here's a 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); 
}