Versuchen, eine Bildüberlagerung und Bildzoom zu erhalten, um zur gleichen Zeit auf Maus Hover

Question

Ich habe Schwierigkeiten beim Versuch, eine Bildüberlagerung und Bildzoom zur gleichen Zeit beim Mouse Hover erscheinen zu lassen. Aus irgendeinem Grund verschwindet das Overlay, wenn ich den Bildzoom hinzufüge. Es scheint, als ob ein Webkit-Übergang den anderen ausschließt. Entweder funktioniert der Zoom oder das Overlay erscheint, aber nicht beide. Jede Hilfe wird sehr geschätzt, ich recherchiere seit Stunden und kann es nicht herausfinden.

HTML-Code:

<div class="image_wrap"> 
    <div class="caption"> 
     <i class="fa fa-search-plus" aria-hidden="true"></i> 
     <p class="heading"> 
      Resort Website 
     </p> 
    </div> 
    <img src="css/images/resort.jpg" alt="resort" class="portfolio-pic"> 
</div> 

CSS-Code:

.image_wrap{ 
    position:relative; 
} 

.image_wrap .caption{ 
    position:absolute; 
    width:100%; 
    height:100%; 
    opacity: 0; 
    text-align:center 
    display:inline-block; 
    background: linear-gradient(rgba(51, 153, 170, 0.9), rgba(51, 153, 170, 0.8)); 
    -webkit-transition:all .4s ease-in-out; 
    transition:all .4s ease-in-out 
} 

.image_wrap .caption:hover{ 
    opacity: 1; 
} 

.image_wrap .caption img { 
    position:relative; 
    -webkit-transition:all .4s linear; 
    transition:all .4s linear; 
} 

.image_wrap .caption:hover img { 
    -ms-transform:scale(1.2); 
    -webkit-transform:scale(1.2); 
    transform:scale(1.2); 
} 

Answer 1

ich erkennen, zwei Probleme auf Ihrem Code, dies ändern:

.image_wrap .caption:hover img { 
-ms-transform:scale(1.2); 
-webkit-transform:scale(1.2); 
transform:scale(1.2); 
} 

Dazu:

.image_wrap:hover img { 
    -ms-transform: scale(1.2); 
    -webkit-transform: scale(1.2); 
    transform: scale(1.2); 
    z-index:8; 
} 

Sie können warum beantworten. Weil Ihr Bild nicht innerhalb von .caption liegt und Sie den Z-Index (Bildunterschrift) nicht deklariert haben.

Deklarieren Sie den Z-Index auch auf die Beschriftung. Hier

.image_wrap:hover .caption { 
    opacity: 1; 
    z-index:9999; 
} 

ist der Link für jsfiddle, wo ich unseren Code testen: link