Отображать текст при наведении на изображение с непрозрачностью

Question

У меня проблема при наведении указателя мыши на изображение, цвет фона изображения не отображается, только он работает, если наведите курсор на нижнюю часть изображения. Кажется, у него конфликт с текстом, который я разместил над изображением.

Вот пример: 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

Вы должны установить :hover на контейнере не img сам тег.

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

Чтобы устранить проблему парения при переключении между верхней и нижней деталей, добавьте это:

.layout { 
    ... 
    overflow: hidden; 
} 

jsFiddle