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

尝试在鼠标悬停时同时显示图像叠加和图像缩放

1 个答案: