懸停在不透明圖像上時顯示文字

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