css实现图片上下模糊（附带效果图）

最新推荐文章于 2025-07-29 15:11:48 发布

chalkbox

最新推荐文章于 2025-07-29 15:11:48 发布

阅读量145

点赞数

CC 4.0 BY-SA版权

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/chalkbox/article/details/132976776

本文介绍了如何使用CSS实现图片上下部分的模糊效果，并在鼠标移入时清除模糊，同时添加了图片放大过渡的交互体验。示例中展示了HTML和CSS代码，以及实际的GIF动图效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css控制图片模糊，毛玻璃效果

css控制图片上下模糊，鼠标移入模糊清除！

html代码：

<ul>
                        <li>
                            <div class="ig">
                                <a class="img-box" href="">
                                    <img src="images/cust1.jpg" alt="">
                                    <div class="burl">
                                        <img src="images/cust1.jpg" alt="">
                                    </div>
                                    <div class="burl-t">
                                        <img src="images/cust1.jpg" alt="">
                                    </div>
                                </a>
                                <div class="text">
                                    <