Display text when hover on image with opacity

Question

I have problem when hovering on image, background color of image not shows, only it works if hover on bottom of image. Seems it have a conflict with text that i placed over image.

Here is example: https://jsfiddle.net/kani339/ed7g6hjp/6/

HTML:

<section>
  <div class="photo-gallery">

    <div class="layout">
      <div class="img-block">
        <img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image-1366x768.jpg" alt="">
      </div>
      <div class="text-overlay">
        <h2>Header Text</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, sed, molestias autem reprehenderit iure hic quia debitis consequatur tempora numquam quasi amet dolor, distinctio porro magnam dolorum. Tenetur, omnis, nihil.</p>
        <button>Learn More</button>
      </div>
    </div>

    <div class="layout">
      <div class="img-block">
        <img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image-1366x768.jpg" alt="">
      </div>
      <div class="text-overlay">
        <h2>Header Text</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, sed, molestias autem reprehenderit iure hic quia debitis consequatur tempora numquam quasi amet dolor, distinctio porro magnam dolorum. Tenetur, omnis, nihil.</p>
        <button>Learn More</button>
      </div>
    </div>

    <div class="layout">
      <div class="img-block">
        <img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image-1366x768.jpg" alt="">
      </div>
      <div class="text-overlay">
        <h2>Header Text</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, sed, molestias autem reprehenderit iure hic quia debitis consequatur tempora numquam quasi amet dolor, distinctio porro magnam dolorum. Tenetur, omnis, nihil.</p>
        <button>Learn More</button>
      </div>
    </div>

    <div class="layout">
      <div class="img-block">
        <img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image-1366x768.jpg" alt="">
      </div>
      <div class="text-overlay">
        <h2>Header Text</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, sed, molestias autem reprehenderit iure hic quia debitis consequatur tempora numquam quasi amet dolor, distinctio porro magnam dolorum. Tenetur, omnis, nihil.</p>
        <button>Learn More</button>
      </div>
    </div>

    <div class="layout">
      <div class="img-block">
        <img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image-1366x768.jpg" alt="">
      </div>
      <div class="text-overlay">
        <h2>Header Text</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, sed, molestias autem reprehenderit iure hic quia debitis consequatur tempora numquam quasi amet dolor, distinctio porro magnam dolorum. Tenetur, omnis, nihil.</p>
        <button>Learn More</button>
      </div>
    </div>

    <div class="layout">
      <div class="img-block">
        <img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image-1366x768.jpg" alt="">
      </div>
      <div class="text-overlay">
        <h2>Header Text</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, sed, molestias autem reprehenderit iure hic quia debitis consequatur tempora numquam quasi amet dolor, distinctio porro magnam dolorum. Tenetur, omnis, nihil.</p>
        <button>Learn More</button>
      </div>
    </div>

  </div>
</section>

CSS:

.layout {
    background: red;
    opacity: 1;
    height: 250px;
    width: 33%;
    float: left;
}

.img-block img {
    height: 250px;
    width: 100%;
    float: left;
}

.img-block img:hover{
    opacity: 0.5;
    cursor:pointer;
}

.text-overlay {
  position:relative;
  text-align: center;
  font-size:14px;
  bottom: 220px;
  color:white;
  visibility: hidden;
}

.layout:hover .text-overlay {
    visibility: visible;
    cursor:pointer;
}

Answer 1

You should set :hover on the container not the img tag itself.

.layout:hover .text-overlay {
  visibility: visible;
}
.layout:hover .img-block img {
  opacity: 0.5;
}

To fix the hover problem when switching between top and bottom items, add this:

.layout {
  ...
  overflow: hidden;
}

jsFiddle