如何将png放置在另一张图片上，并且仍然能够与两者互动？

Question

我正在构建一个投资组合网站，我想在背景顶部放置一个模型，但是当我将鼠标悬停在该模型上时，就无法与背景进行交互。我希望它们都可以缩放，但是样机应该比背景缩放更多，因此我需要分别对它们进行：hover。

我尝试摆弄z-index，但没有成功。现在是这样的：https://imgur.com/NPrHdAI

这是我的HTML和CSS：

.try {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 80px 0px 60px 10px;
}

.bg {
  height: 250px;
  margin: 10px;
  border-radius: 3px;
  -webkit-box-shadow: 0px 5px 10px 0px rgba(214, 214, 214, 0.3);
  -moz-box-shadow: 0px 5px 10px 0px rgba(214, 214, 214, 0.3);
  box-shadow: 0px 5px 10px 0px rgba(214, 214, 214, 0.3);
  transition: all .3s ease-in-out;
}

.mockup {
  position: absolute;
  height: 300px;
  transition: all .3s ease-in-out;
}

.mockup:hover {
  transform: scale(1.2);
}

<div class="try">
  <div>
    <img class="mockup" src="img/mockup.png">
    <img class="bg" src="img/bg.jpg">
  </div>

  <div>
    <img class="mockup" src="img/mockup.png">
    <img class="bg" src="img/bg.jpg">
  </div>

  <div>
    <img class="mockup" src="img/mockup.png">
    <img class="bg" src="img/bg.jpg">
  </div>

</div>

我希望两个元素分别缩放，但是样机阻止了背景在悬停时缩放。

Answer 1

您可以使用包装div来触发悬停，并为mockup和bg分配不同的效果，如下所示：

.wrapper:hover .mockup {
    transform: scale(1.2);

}

.wrapper:hover .bg {
    transform: scale(5.0);

}

完整代码段：（您可以看到它们的大小都不同）

.try {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    margin: 80px 0px 60px 10px;
}

.bg {

    height: 250px;
    margin: 10px;
    border-radius: 3px;

    -webkit-box-shadow: 0px 5px 10px 0px rgba(214,214,214,0.3);
    -moz-box-shadow: 0px 5px 10px 0px rgba(214,214,214,0.3);
    box-shadow: 0px 5px 10px 0px rgba(214,214,214,0.3);

    transition: all .3s ease-in-out;
}

.mockup {
    position: absolute;
    height: 300px;



    transition: all .3s ease-in-out;
}

.wrapper:hover .mockup {
    transform: scale(1.2);

}

.wrapper:hover .bg {
    transform: scale(5.0);

}

<div class="wrapper">
            <img class="mockup" src="img/mockup.png">
            <img class="bg" src="img/bg.jpg"> 
</div>