html - 试图让图像叠加和图像缩放在鼠标悬停时同时出现

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