css實現圖片上下模糊（附帶效果圖）

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">
                                    <p>Three arm sprinkler with round base</p>
                                </div>
                            </div>
                        </li>
                        <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">
                                    <p>Three arm sprinkler with round base</p>
                                </div>
                            </div>
                        </li>
<ul>

　　

css代碼：圖片寬度設置了100%,加入了hover圖片放大過渡效果

.img-box {
    overflow: hidden;
    position: relative;
}

.img-box img {
    transition: 1s ease;
}

.img-box:hover img {
    transform: scale(1.1, 1.1);
}

ul li .ig .img-box .burl {
  transition: 1s all cubic-bezier(.46, 1, .23, 1.52);
  position: absolute;
                top: 0;
                width: 115%;
                height: 80px;
                overflow:hidden;
                transform: translate(-10px,-10px);
                filter: blur(5px);
}
ul li .ig .img-box .burl-t {
  transition: 1s all cubic-bezier(.46, 1, .23, 1.52);
  position: absolute;
                bottom: 0;
                width: 115%;
                height: 80px;
                overflow:hidden;
                transform: translate(-10px,10px);
                filter: blur(5px);
}
ul li .ig .img-box:hover .burl {
  height: 0;
}
ul li .ig .img-box:hover .burl-t {
  height: 0;
}　

　

效果圖：

左側是鼠標移入觸發hover，右側是原始狀態。

 

 

 

GIF圖效果：