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

Posted 2023-05-08

【中文标题】同时悬停时半透明背景和缩放[重复]

【英文标题】：Semi-transparent background and scaling while hovering at the same time [duplicate]

【发布时间】：2020-12-12 07:30:08

【问题描述】：

请告诉我，有没有办法同时执行以下 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" >
  <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" >
</div>

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

【问题讨论】：

指针事件：无；停电

【参考方案1】：

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

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

希望我能帮上忙。

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

【讨论】：

非常感谢您，辛普利修斯！我认为第二种方式非常适合我！我不知道这个 CSS 设置。