<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
* {
margin: 0px;
padding: 0px;
}
.img-box {
width: 100px;
height: 100px;
display: inline-block;
position: relative;
cursor: pointer;
}
.img-box img {
width: 100%;
height: 100%;
}
.img-box::before, .img-box::after {
z-index: 1000;
opacity: 0;
}
.img-box::before {
content: " ";
border: 50px solid #000;
position: absolute;
}
.img-box::after {
content: attr(data-tip);
top: -100%;
color: #ffffff;
position: relative;
}
.img-box:hover::before {
opacity: 0.5;
}
.img-box:hover::after {
opacity: 1;
}
</style>
</head>
<body>
<div class="img-box" data-tip="床前明月光,疑是地上霜。举头望明月,低头思故乡。">
<img src="1.png">
</div>
</body>
</html>
前面写的代码有点问题,当时只是用google浏览器测了一下就发了,没想到火狐上有问题,所以就修改了一下,google、firefox和ie都每问题,不过data-tip中的文字不能太多,如果太多会溢出图片遮罩,这个可以根据具体情况优化一下。