<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.img-group{
/*使整个大盒子的长度与图片适应*/
display: inline-block;
position: relative;
}
.img-tip{
bottom: 120px;
width: 100%;
/*使文字居中*/
text-align: center;
background-color: palegreen;
color: deeppink;
/*文字的透明度*/
opacity: 0.6;
display: none;
position: absolute;
}
/*当鼠标移入大盒子，文字显示出来*/
.img-group:hover .img-tip{
display: block;
}
</style>
</head>
<body>
<div class="img-group">
<img src="img/1.jpg" />
<span class="img-tip">嗨，早上好</span>
</div>
</body>
</html>