前端实现图片悬浮_前端技巧集：三步制作图片悬浮文字

鼠标悬停在图片上显示文字，是电商网页经常使用的效果，下面三步教会大家CSS如何完成这个效果。

前提

HTML图片和文字是并列显示的。如下：

我是雪豹

1. 将文字浮在图片上

我们加个div把图片和文字包在一起，并且加上img-group和img-tip这两个class，便于后面的处理。

我是雪豹

我们要让文字浮在图片上面，需要加上定位。看文字浮在了图片的底部。

.img-group {

position: relative;

display: inline-block;

}

.img-tip {

position: absolute;

bottom: 0;

}

display: inline-block;与定位无关，只是使整个.img-group长宽与图片适应。

2. 文字与背景处理

文字左对齐，我们把文字居中。给.img-tip添加如下代码：

width: 100%;

text-al