同时悬停时半透明背景和缩放[重复]

Question

请告诉我，有没有办法同时执行以下 2 个功能？

1. 图片应具有半透明背景
2. 悬停时应缩放图像

目前，我只有其中之一：没有半透明背景的缩放或没有缩放的图像和半透明背景。

.item {
  border: 1px solid red;
  width: 200px;
  height: 150px;
  overflow: hidden;
  position: relative;
}

img {
  width: 200px;
  height: 150px;
  transition: all 0.3s;
}

img:hover {
  transform: scale(1.1);
}

.blackout {
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.hover {
  position: absolute;
  top: 0;
  height: 100%;
  width: inherit;
}

<div class="item">
  <img src="https://img3.goodfon.com/original/4500x3600/4/cf/britanskaya-korotkosherstnaya-5636.jpg" alt="cat">
  <div class="hover blackout"></div>
</div>

<div class="item blackout">
  <img class="blackout" src="https://img3.goodfon.com/original/4500x3600/4/cf/britanskaya-korotkosherstnaya-5636.jpg" alt="cat">
</div>

<div class="item blackout">
    <img src="" alt="cat">
</div>

Answer 1

实际上有多种方法可以实现您想要的。

• 首先，可能是最简洁的方法是在悬停时要缩放的图像上使用filter. blur(); 属性。阅读文档Here。
• 其次是使用pointer-events: none; 在你放在顶部的“停电” div 上，如果图像。这将使它对指针事件“透明”，这意味着每次您将鼠标悬停在“停电” div 上时，实际上都是将图像悬停在其下方。
• 第三，也是我最不推荐的方式，虽然它确实有效，但是将你的“停电” div 放在 DOM 中的图像之前，然后像这样：.blackout:hover ~ img { transform: scale(1.1};

希望我能帮上忙。

注意：我刚刚读到你想让图像半透明，而不是模糊，然后使用filter: opacity();