CSS 在容器内模糊滤镜而不剪裁

Question

我有一个父图像 div 在悬停时过渡到模糊状态。但是，如果图像是父图像的 100% width/height，则在模糊时您会得到父图像的背景颜色的边框。所以我试着让图像说 140% width/height and/or negative left/right/top/bottom 但没有成功。这种方法确实摆脱了边框，但直到过渡结束时才摆脱，并且通过这种奇怪的剪裁效果，我收集到的东西对父容器的溢出有影响属性，我需要它作为[=21] =] 供我使用（参见示例）。请帮我弄清楚如何在没有边框的情况下获得这种模糊效果，并且在过渡结束时出现奇怪的剪裁，同时仍在进行过渡持续时间。就我的应用目的而言，放大 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

这是我的解决方案。我刚刚将 img 的 left & top 属性更改为 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>

Answer 2

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

#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>

CSS 在容器内模糊滤镜而不剪裁

CSS Blur filter within container without clipping

html

css

blur

filter

css-transitions