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

最新推荐文章于 2024-08-29 14:32:15 发布

原创

最新推荐文章于 2024-08-29 14:32:15 发布 · 218 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

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

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

最低0.47元/天解锁文章