css实现hover遮图罩

**

css实现hover遮图罩

萌新一枚,第一次写，有不周到和不合理的地方请大佬们多多提意见~
在百度前端学院学到做一个简单的网页，写写笔记，加深一下理解，也可以给一些需要的朋友一点参考~

鼠标hover到图片上时的效果变化

1.首先将四张图分为上下两部分，用；两个div包裹起来
2.

首先在上方的div中再分左右两个div，将第一张图片放在左边div中，在css中给出图片地址以及样式，
background-image: url();括号里填图片地址
background-repeat: no-repeat;不要平铺
background-size: cover;图片铺满所包含的div

3.遮图罩里的内容：
在包含了图片的div中新建div,里面就是遮图罩的类容：例如

在css中填写遮图罩的样式，用visibility: hidden;隐藏遮图罩（此时遮图罩的内容是与图片重叠的，在遮图罩的样式中，注意加上background-color: rgba(0, 0, 0, 0.6);意思是给图片上加上一层颜色背景，前三个数字是颜色，后面一个是透明度
）

4.使用hover显示遮图罩
用
.img-5:hover .active {
visibility: visible;
}
将遮图罩显示出来，此时将鼠标移上第一张图片后会出现遮图罩效果，移开就会消失，我们所需要的效果就做好啦，其他几张也是这样！
**