Html 文本如何显示在我的图像上？

到目前为止，我已经按照我喜欢的方式编写了代码（这个网站正在开发中），我意识到当我将光标悬停在图像上时，我需要文本显示在图像上。我是一个新手，我的代码中有太多的东西，我把自己弄糊涂了，我第一次去论坛

以下是html：

.img单{
宽度：550px；
高度：367px；
浮动：左；
利润率：40像素15像素；
位置：相对位置；
}
.img单个img{
宽度：100%；
身高：100%；
位置：绝对位置；
顶部：0px；
左：0px；
过渡：所有200ms的缓进缓出；
-webkit过渡：所有200毫秒的易入易出；
-o型过渡：所有200ms的缓进缓出；
}
.img单个img：悬停{
宽度：110%；
身高：110%；
位置：绝对位置；
前-5%；
左-5%；
}
.img单：悬停{
z指数：1000；
}
.包装纸{
宽度：1160px；
保证金：0自动；
}
.端口盒{
溢出：隐藏；
填充；80px 0px；
}

版权及副本；2017年理查德·斯普拉德

首先，您应该通过为父div添加position:relative，为text添加position:absolute，并在加载时将其隐藏，从而将文本放置在图像上

当鼠标悬停在父div上时，显示文本。

下面是工作代码

.img单{
宽度：400px；
浮动：左；
利润率：40像素15像素；
位置：相对位置；
}
.img单个img{
宽度：100%；
最小高度：100px；
}
.img single.text{
位置：绝对位置；
底部：0；
左：0；
字体大小：30px；
颜色：#fff；
背景：rgba（0,0,0,0.5）；
宽度：100%；
显示：无；
}
.img single:hover.text{
显示：块；
}
.包装纸{
宽度：1160px；
保证金：0自动；
}
.端口盒{
溢出：隐藏；
衬料
80px-0px；
}

版权及副本；2017年理查德·斯普拉德

您可以使用

显示：无当图像上没有悬停且图像上有悬停时，使用
显示：块


.img单{
宽度：550px；
高度：367px；
浮动：左；
利润率：40像素15像素；
位置：相对位置；
}
.img单个img{
宽度：100%；
身高：100%；
位置：绝对位置；
顶部：0px；
左：0px；
过渡：所有200ms的缓进缓出；
-webkit过渡：所有200毫秒的易入易出；
-o型过渡：所有200ms的缓进缓出；
}
.img单个img：悬停{
宽度：110%；
身高：110%；
位置：绝对位置；
前-5%；
左-5%；
}
.img单：悬停{
z指数：1000；
}
.包装纸{
宽度：1160px；
保证金：0自动；
}
.端口盒{
溢出：隐藏；
衬料
80px-0px；
}
.textimg{
显示：无；
位置：绝对位置；
最高：50%；
右：50%；
}
.img单个：悬停.textimg{
显示：块；
}







版权及副本；2017年理查德·斯普拉德
添加了一个div覆盖，带有文本的绝对位置。如果您正在查找在悬停时生效的文本


.img单{
宽度：550px；
高度：367px；
浮动：左；
利润率：40像素15像素；
位置：相对位置；
}
.img单个img{
宽度：100%；
身高：100%；
位置：绝对位置；
顶部：0px；
左：0px；
过渡：所有200ms的缓进缓出；
-webkit过渡：所有200毫秒的易入易出；
-o型过渡：所有200ms的缓进缓出；
}
.img单：悬停{
z指数：1000；
}
.包装纸{
宽度：1160px；
保证金：0自动；
}
.端口盒{
溢出：隐藏；
衬料
80px-0px；
}
.覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
身高：100%；
宽度：100%；
不透明度：0；
过渡：放松；
背景色：#008CBA；
}
.文本{
颜色：白色；
字体大小：20px；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}
.img单个：悬停。覆盖{
不透明度：1；
}







版权及副本；2017年理查德·斯普拉德
对于占位符图像：
.img-single {
  position: relative;
}  

.img-single .text {
  position: absolute;
  bottom: 0;
  left: 0;      
  display: none;
}

.img-single:hover .text {
  display: block;
}