Html 带有文本css的图像悬停效果

如何在包含文本的图像上使用覆盖效果。

---

我试着用这个，但它不符合我的需要

试试这个。我已经改变了一些css

.ft项目{ 浮动：左； 边缘底部：0px； 位置：相对位置； } .项目H5{ 颜色：fff； 字体大小：15px； 字体大小：300； 字号：700； 字母间距：0.5px； 边缘底部：0px； 字体系列：“Roboto Slab”，衬线； 字号：500； } .ft图像{ 浮动：左； 宽度：100%； 显示：块； } .ft图像img{ 宽度：100%； 高度：自动； } .ft数据{ 背景：rgba30,110,30,0.68； 内容：； 身高：0； 左：0； 位置：绝对位置； 右：0； 宽度：100%； -webkit过渡：.5s轻松； 过渡：放松； 不透明度：0； } .ft项目：悬停.ft数据{ 身高：100%； 不透明度：1； } .ft数据.text上限{ 显示：块； 左：0； 位置：绝对位置； 右：0； 文本对齐：居中； 最高：50%； -webkit转换：translateY-50%； 转化：translateY-50%； } 英尺{ 浮动：左； 宽度：100%； 填充：3x10px； 背景：2000人； } 福特酒店， .ft飞机， .ft tea， .ft船， .ft汽车{ 浮动：左； 高度：16px； 利润率：0.5px； 颜色：292c2f； 左侧填充：20px； 字体大小：12px； 线高：20px； } .上文本{ 文本转换：大写； } .ft标题{ 浮动：左； 字体大小：14px； } .ft报价{ 浮动：对； 颜色：fff； 字体大小：11px； 字号：700； 边缘顶部：10px； } 潘帕德先生{ 填充：0px； } 英尺{ 浮动：左； 宽度：100%； 填充：3x10px； 背景：4848； } 英尺{ 填充：0； 保证金：0； 文本对齐：居中； } 李先生{ 显示：内联块； 边际：0.2px； } .包容{ 颜色：白色； 填充：5px 0 10px 0； 显示：块； 字母间距：1px； 文本对齐：居中； } .包含范围{ 显示：块； 字号：8px； 文本转换：大写； } .第一项{ 字体大小：20px； } 指导 实地考察 旅馆 运输 食物

---

试试这个。我已经改变了一些css

.ft项目{ 浮动：左； 边缘底部：0px； 位置：相对位置； } .项目H5{ 颜色：fff； 字体大小：15px； 字体大小：300； 字号：700； 字母间距：0.5px； 边缘底部：0px； 字体系列：“Roboto Slab”，衬线； 字号：500； } .ft图像{ 浮动：左； 宽度：100%； 显示：块； } .ft图像img{ 宽度：100%； 高度：自动； } .ft数据{ 背景：rgba30,110,30,0.68； 内容：； 身高：0； 左：0； 位置：绝对位置； 右：0； 宽度：100%； -webkit过渡：.5s轻松； 过渡：放松； 不透明度：0； } .ft项目：悬停.ft数据{ 身高：100%； 不透明度：1； } .ft数据.text上限{ 显示：块； 左：0； 位置：绝对位置； 右：0； 文本对齐：居中； 最高：50%； -webkit转换：translateY-50%； 转化：translateY-50%； } 英尺{ 浮动：左； 宽度：100%； 填充：3x10px； 背景：2000人； } 福特酒店， .ft飞机， .ft tea， .ft船， .ft汽车{ 浮动：左； 高度：16px； 利润率：0.5px； 颜色：292c2f； 左侧填充：20px； 字体大小：12px； 线高：20px； } .上文本{ 文本转换：大写； } .ft标题{ 浮动：左； 字体大小：14px； } .ft报价{ 浮动：对； 颜色：fff； 字体大小：11px； 字号：700； 边缘顶部：10px； } 潘帕德先生{ 填充：0px； } 英尺{ 浮动：左； 宽度：100%； 填充：3x10px； 背景：4848； } 英尺{ 填充：0； 保证金：0； 文本对齐：居中； } 李先生{ 显示：内联块； 边际：0.2px； } .包容{ 颜色：白色； 填充：5px 0 10px 0； 显示：块； 字母间距：1px； 文本对齐：居中； } .包含范围{ 显示：块； 字号：8px； 文本转换：大写； } .第一项{ 字体大小：20px； } 指导 实地考察 旅馆 运输 食物

---

在本例中，您只希望ft数据生效吗？无完整ft项目在本例中，您只希望ft数据生效吗？无完整ft项目

<div class="ft-item">
  <span class="ft-image">
        <img src="https://image.ibb.co/irjHmR/backwater.jpg" alt="featured Scroller" draggable="false">
        </span>
  <div class="ft-data">
    <a class="text-upper" href="#">
      <h5 class="itemh5">Test Content</h5>
    </a>
  </div>
</div>