html - 为什么带有过渡的模糊滤镜会有一些滞后和问题？

Question

悬停在图像上后，图像边缘出现白色滞后，然后这将被隐藏！！！我怎样才能解决这个问题？

代码在这里：

img {
    width: 100%;
    transform: scale(1.1);
    @include transition_all(0.3s);
}

img:hover {
    filter: blur(10px);
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
}

<a href="assets/images/portfolio/1.jpg" class="portfolio-item images" data-featherlight="image">
    <div class="portfolio-item-wrap">
        <img src="assets/images/portfolio/1.jpg" alt="portfolio title"/>
        <div class="desc">
             <h5>Gallery</h5>
             <h4>Fruits Images</h4>
        </div>
    </div>
</a>

标签： htmlcss

Answer 1

模糊滤镜占用的资源非常多，您对此无能为力。出于这个原因，我通常避免使用模糊滤镜。