不透明度の画像上にマウスを置くとテキストが表示されます

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

あなたはコンテナではないimgタグ自体に:hoverを設定する必要があります。ここ

は一例です。上部と下部の項目を切り替えるときにこれを追加し、ホバー問題を解決するために

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

：

.layout { 
    ... 
    overflow: hidden; 
} 

jsFiddle