搜索这个效果的时候，很多人都是用css结合jQuery实现的，其实直接用css也可以实现哦~
效果前：
效果后：
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>css如何实现鼠标移至图片上显示遮罩层及文字</title><style type="text/css">html,body {width: 100%;height: 100%;margin: 0;padding: 0;}.container {display: flex;width: 100%;height: 100%;}.imgbox {position: relative;width: 220px;height: 200px;margin: auto;}.imgbox img {width: 220px;height: 200px;/* 转换速度 */transition: transform 0.5s ease;}.imgbox .mask {position: absolute;top: 0;left: 0;width: 220px;height: 200px;background: rgba(44, 44, 44, 0.6);color: #ffffff;opacity: 0;display: flex;font-size: 13px;/* 转换速度 */transition: transform 0.5s ease;}.mask span {margin: auto;}.imgbox a:hover .mask {opacity: 1;/* 增加元素的大小*/-webkit-transform: scale(1.1, 1.1);/* Safari */-ms-transform: scale(1.1, 1.1);/* IE 9 */transform: scale(1.1, 1.1);}.imgbox:hover img {-webkit-transform: scale(1.1, 1.1);/* Safari */-ms-transform: scale(1.1, 1.1);/* IE 9 */transform: scale(1.1, 1.1);}</style></head><body><div class="container"><div class="imgbox"><img src="assets/project1.jpg" /><a href="/Gladys_Huang"><div class="mask"><span>测试</span></div></a></div></div></body></html>
