html - 容器内的 CSS 模糊过滤器，无需剪裁

Question

当鼠标悬停时，父 div 中的图像会转换为模糊状态。但是，如果图像是父级图像的 100% 宽度/高度，则在模糊时您会得到父级背景颜色的边框。所以我试着让图像说 140% 宽度/高度和/或负左/右/上/下但没有成功。这种方法确实摆脱了边框，但直到过渡结束时才摆脱，并且通过这种奇怪的剪裁效果，我收集到的东西与父容器的溢出属性有关，我需要将其“隐藏”以供使用(见示例)。请帮我弄清楚如何在没有边框的情况下获得这种模糊效果，并且在过渡结束时出现奇怪的剪裁，同时仍在进行过渡持续时间。就我的应用目的而言，放大 120% 到 140% 的图像实际上是理想的。谢谢!

div {
    position:relative;
    width:200px;
    height:200px;
    overflow:hidden;
    margin:auto;
    background-color: red;
}
    
    img {
        position:absolute;
        width:140%;
        height:140%;
        transition-duration: 1s;
        left:-20%;
        top:-20%;
    }
    
    div:hover img {
        -webkit-filter: blur(30px);
        filter: blur(30px);
        transition-timing-function: ease-out;
    }

<div id='container'>
        <img src = 'https://i.chzbgr.com/full/9112752128/h94C6655E/'>
    </div>

Answer 1

一个想法是复制图像并考虑在悬停时模糊的图像底部的模糊版本。这将减少看到背景的不良影响。

#container {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  margin: auto;
  background-color: red;
}

#container > div {
  position:absolute;
  width: 140%;
  height: 140%;
  left: -20%;
  top: -20%;
  background-size:0;
}
#container > div:before,
#container > div:after{
   content:"";
   position:absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
   background-image:inherit;
   background-size:cover;
   transition:filter 1s;
  transition-timing-function: ease-out;
}
#container> div:before,
#container:hover > div:after {
  filter: blur(30px);
}

<div id='container'>
  <div style="background-image:url(https://i.chzbgr.com/full/9112752128/h94C6655E/)"></div>
</div>