Anzeige von Text beim Schweben auf Bild mit Deckkraft

Question

Ich habe ein Problem, wenn auf Bild schweben, Hintergrundfarbe des Bildes nicht angezeigt wird, funktioniert es nur, wenn der Mauszeiger am unteren Rand des Bildes schwebt. Es scheint einen Konflikt mit dem Text zu haben, den ich über das Bild gelegt habe.

Hier ist Beispiel: 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

Sie :hover auf dem Behälter festgelegt sollte nicht der img Tag selbst.

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

das Hover-Problem zu beheben, wenn zwischen oberen und unteren Elemente wechseln, fügen Sie diese:

.layout { 
    ... 
    overflow: hidden; 
} 

jsFiddle