HTML图片和文字是敛财醣沁并列显示的。如下：
我们要让文字浮在图片上面，需要加上定位。看文字浮在了图片的底部。
display:inline-block;与定位无关，只是使整个.img-group长宽与图片适应。
2.文字与背景处理
文字左对齐，我们把文字居中。给.img-tip添加如下代码：
文字不清楚，我们加上背景和字体颜色，并适当的设置一下透明。给.img-tip添加如下代码：
3.鼠标悬浮特效
现在静态效果已经完成了，接下来，加一下鼠标悬浮出现文本的效果，现在.img-tip添加如下代码，让文本默认隐藏：
再加上鼠标悬停在图片上，显示文本的代码：
代码总汇
HTML
<divclass="img-group"><imgsrc="img/snow.png">
<divclass="img-tip">我是雪豹</div></div>
CSS
.img-group{position:relative;display:inline-block;
}
.img-tip{position:absolute;bottom:0;background:#333;color:#fff;opacity:0.6;display:none;
}
.img-group:hover.img-tip{display:block;width:100%;text-align:center;
}