Попытка получить наложение изображения и увеличение изображения в одно и то же время при наведении указателя мыши

Question

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

HTML код:

<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 код:

.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

Я обнаружить две проблемы на вашем коде, это изменить:

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

Для этого:

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

Вы можете ответить, почему. Потому что ваш образ не внутри .caption, и вы не объявили z-index (подпись на изображении).

Заявить z-index на подпись тоже.

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

Вот ссылка для jsfiddle, где я могу проверить наш код: link