网页设计怎么制作鼠标放到图片上会出现蒙版效果

1、第一步：为了实现这种效果，我们需要写两个ｄｉｖ布局标签。一个显示图片，一个用作蒙版。

<div id="image" class=""> 

　　<div id="mb" class=""></div>

</div>

2、第二步：将图片插入到第一个ｄｉｖ标签中。既添加＜ｉｍａｇｅ＞标签。

<div id="image" class="">

  <img src="C:/Users/Administrator.SC-201909092242/Desktop/无标题.jpg

　　　<div id="mb" class="">  </div>

 </div>

3、第三步：编写第二个ｄｉｖ标签的宽和高使其和图片的宽高一致。并设置其半透明状态。

<style type="text/css">

#image{ width:600px; height:400px;}

#mb{ width:600px; height:400px; background:#ff6666;opacity:0.8;}

</style>

4、第四步：设置两个ｄｉｖ标签的属性，ｐｏｓｉｔｉｏｎ。

#image{ width:600px; height:400px; position:relative;}

#mb{ width:600px; height:400px; background:#ff6666;opacity:0.8; position:absolute; top:0;left:0;}

5、第五步：继续编写两个ｄｉｖ标签的样式。鼠标移动到图片上就会出现蒙版。

 <style type="text/css">

  *{margin:0;padding:0;}

#image{ width:600px; height:400px; position:relative;}

#mb{ width:600px; height:400px; background:#ff6666;opacity:0.8; 

     position:absolute; top:0;left:0; display:none;font-size:30px; 

line-height:400px;text-align:center;

}

#image:hover #mb{display:block;}

  </style>

6、第六步：此时，在浏览器中进行浏览就可看到，鼠标放到图片上就会出现蒙版层。

7、总结：

１首先打开网页设计软件新建或者打开一个ＨＴＭＬ文件

２编写两个ｄｉｖ标签

３设置ｄｉｖ标签的ｐｏｓｉｔｉｏｎ属性

４设置鼠标移动上去的ｈｏｖｅｒ属性

５设置完成即可实现蒙版效果