鼠标移动到图片上显示遮罩,并且显示一些文字
效果:
![鼠标没有在图片上悬停](https://i-blog.csdnimg.cn/blog_migrate/87eead89eb3722b7d1d69f3d5ed63f1c.png)
![鼠标在图片上悬停的样子](https://i-blog.csdnimg.cn/blog_migrate/79c807808780be52807f879ab4b8a367.png)
分析:
遮罩层主要是以半透明黑色背景为主,加上文字和四根修饰线条,这就是鼠标hover到图片上以后要显示的内容。
先将遮罩内容写好在HTML文件里面,然后根据图片效果来添加css样式就可以了,下面是代码,我再大致分析一下用到的属性
代码:
html:
<div class="b
遮罩层主要是以半透明黑色背景为主,加上文字和四根修饰线条,这就是鼠标hover到图片上以后要显示的内容。
先将遮罩内容写好在HTML文件里面,然后根据图片效果来添加css样式就可以了,下面是代码,我再大致分析一下用到的属性
html:
<div class="b