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

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

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

html代码：

• Three arm sprinkler with round base

• Three arm sprinkler with round base

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图效果：