I'm struggling to display an image overlay and image zoom simultaneously when hovering the mouse. After adding the image zoom effect, the overlay disappears. It seems like one transition is overriding the other. Whenever the zoom works, the overlay doesn't show up and vice versa. I've been researching this issue for hours without success. Any assistance would be highly appreciated as I cannot seem to find a solution.
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);
}