当鼠标hover到图片上时，出现半透明遮罩效果，移除hover则取消半透明遮罩效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.demo{
width:425px;
height:283px;
position: relative;
overflow:hidden;
}
demo img{
width:100%;
}
.demo i{
position:absolute;
top:0;
width:100%;
height:100%;
background-color: rgba(251,251,251,0);
transition: background-color 0.5s;
}
.demo:hover i{
background-color: rgba(251,251,251,0.3);
}
</style>
</head>
<body>
<p class="demo">
<img src="2.jpg">
<i></i>
</p>
</body>
</html>