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

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

前提

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

<img src="img/snow.png">
<div>我是雪豹</div>

1. 将文字浮在图片上

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

<div class="img-group">
  <img src="img/snow.png">
  <div class="img-tip">我是雪豹</div>
</div>

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

.img-group {
  position: relative;
  display: inline-block;
}
.img-tip {
  position: absolute;
  bottom: 0;
}

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

2. 文字与背景处理

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

  width: 100%;
  text-align: center;

文字不清楚，我们加上背景和字体颜色，并适当的设置一下透明。给.img-tip添加如下代码：

  background: #000;
  color: #fff;
  opacity: 0.6;

3. 鼠标悬浮特效

现在静态效果已经完成了，接下来，加一下鼠标悬浮出现文本的效果，现在.img-tip添加如下代码，让文本默认隐藏：

  display: none;

再加上鼠标悬停在图片上，显示文本的代码：

.img-group:hover .img-tip {
  display: block;
}

代码总汇

HTML

<div class="img-group">
  <img src="img/snow.png">
  <div class="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;
}

很简单吧，童鞋们get了吗？

如有帮助请点赞，如有疑问请留言。