容器内的 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>

Answer 2

这是我的解决方案。我刚刚将 img 的左侧和顶部属性更改为 0。希望这对您有所帮助。

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

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