Question

当悬停在父div上时，我的图像过渡到模糊状态。但是，如果图像是父对象的宽度/高度的100％，则模糊时会得到父对象背景色的边框。因此，我尝试使图像显示140％的宽度/高度和/或负向左/向右/顶部/底部，但没有成功。此方法确实会删除边框，但要等到过渡结束时才会发生，并且通过这种奇怪的剪切效果，我收集到的效果对父容器的overflow属性有所帮助，我需要将其作为“隐藏”使用（参见示例）。请帮助我弄清楚如何在过渡结束时以及过渡期间仍没有边框和奇怪的剪裁的情况下获得这种模糊效果。就我的应用目的而言，放大120％至140％的图像实际上是理想的。谢谢！

DbContext.Database.ExecuteSqlCommand

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;
    }

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模糊过滤器，无需裁剪

2 个答案: