CSS鼠标悬浮图片模糊切换效果

CSS鼠标悬浮图片模糊切换效果

当我们想设置在鼠标移入前，图片是半透明（模糊）的，在我们鼠标移入后，图片就变得清晰，这里我们可以设置css的伪类：hover来实现：

首先我们在body中写一个div模块，这个div包裹了两个部分，一个部分就是我们要用的img，第二部分就是文字，文字部分也用一个div包裹。
如下图所示：
鼠标移入前：

鼠标移入后：

在这个图片里面大家可以明显的感觉到图片在文字的背后，而且是模糊的，那我们要怎么做才能将其背后的图片显示出来呢？要想知道背后的图片是怎么显示出来的，那我们要先把图片是怎么放在背后这个点搞清楚。

1.背景图片嵌入在文字背后

在这个地方是一个难点就是，我们怎么将图片放在文字背后呢？
注意：我们的目标是让最外面的框的高度=img的高度，然后文字在上面，在这里我选择的办法是让最里面的块脱离文档流，利用position的相关属性。

• 1.首先先设置最外面的块css样式为position：relative；
  这里设置最外面的块为相对定位，不脱离文档流，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。
• 2.第二步就是设置最里面的css样式为position：absolute；
  这里脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。
  这样设置后三个块就可以重合了。

2.将背景图片设位置模糊/毛玻璃效果

我们完成了第一步之后发现，确实三个块都重合了，但是图片还是清晰的，怎么将它设置模糊效果呢，这里要用到我们的关键属性**filter:blur(5px);**，该属性来实现毛玻璃的效果，让背景看起来模糊，类似于毛玻璃的效果。

img.blur {
    -webkit-filter: blur(4px);     /*灰度处理*/
    filter: blur(4px);				/*模糊滤镜*/
}
 
img.brightness {
    -webkit-filter: brightness(0.30);	
    filter: brightness(0.30);			/*亮度滤镜*/
}
 
img.contrast {
    -webkit-filter: contrast(180%);
    filter: contrast(180%);				/*对比度滤镜*/
}
 
img.shadow {
    -webkit-filter: drop-shadow(8px 8px 10px green);
    filter: drop-shadow(8px 8px 10px green);        /*阴影滤镜*/
}
 
img.huerotate {
    -webkit-filter: hue-rotate(180deg);
    filter: hue-rotate(180deg);          /*色相旋转滤镜*/
}
 
img.invert {
    -webkit-filter: invert(100%);
    filter: invert(100%);			/*反色滤镜*/
}
 
img.opacity {
    -webkit-filter: opacity(50%);
    filter: opacity(50%);			/*透明度滤镜*/
}
 
img.saturate {
    -webkit-filter: saturate(7);
    filter: saturate(7);				/*饱和度滤镜*/
}

记得blur不可以作用在有内容的父元素上，会将子元素都模糊化，如果不想要周边的阴影，可以在父元素上加overflow:hidden；

3.变模糊的背景变清晰

最后一步就是将模糊的背景显示出本来的样子，这里我们直接将模糊滤镜的里面的属性值变成0就行了，哈哈哈，这里我们还可以加一个transtion使得图片有个0.5s的效果时间，相当于一个动画效果了。
代码如下：

		filter: blur(0px);
        -webkit-filter: blur(0px);
        transition: 0.5s ease-in-out;

4.总结：

	以上就是鼠标移入时将模糊的背景显示出来的流程，希望能够帮助到大家。
	喜欢的点个赞再走吧，谢谢。