Html 如何在img链接悬停上显示文本？

我尝试过其他用户向Stackoverflow上的用户建议的方法，这些用户问了或多或少相同的问题，但尽管对我的代码使用了相同的方法，但最终文本显示在img下面

我也遵循了这个方法：但同样的事情发生了

html，
身体{
字体系列：；
保证金：0自动；
填充：10px；
文本转换：无；
字体系列：欧罗巴；
字体大小：400；
字体风格：普通；
线高：1.3em；
字母间距：0em；
文本转换：无；
颜色：#000；
}
.标题h1{
背景色：；
保证金：0自动；
填充：10px；
显示：内联块；
字体大小：15px；
字母间距：0.8px；
}
.标题.导航{
浮动：对；
显示：内联块；
填充：10px；
字体大小：15px；
字母间距：0.8px；
}
.标题.导航a{
字体系列：欧罗巴；
颜色：黑色；
填充：15px；
文字装饰：无；
}
.行{
保证金：0自动；
显示：内联块；
}
.容器液体{
填充：；
保证金：0自动；
}
#正文{
字体系列：欧罗巴；
字体大小：400；
字体风格：普通；
字号：3em；
线高：1.3em；
字母间距：0em；
文本转换：无；
颜色：#000；
宽度：50%；
填充：10px；
}
.col-md-6{
保证金：0自动；
宽度：50%；
浮动：左；
文本对齐：居中；
填充：10px；
背景色：#fff；
身高：100%；
}
.col-md-6.包装器{
填充：0；
边框：0px纯黑；
}
.col-md-6.包装器img{
最大宽度：100%；
最大高度：100%；
}
.col-md-6.包装器图像：悬停{
不透明度：0.6；
过渡：不透明度0.5s缓进缓出；
-moz过渡：不透明度0.5s缓进缓出；
-webkit过渡：不透明度0.5s缓进缓出；
}
@仅介质屏幕和（最大宽度：800px）{
.col-md-6{
浮动：无；
背景色：无；
显示：内联块；
填充：10px；
保证金：0；
宽度：100%；
}
#正文{
浮动：无；
显示：内联块；
填充：10px；
保证金：0；
宽度：100%；
}
.标题.导航{
显示：内联块；
填充：10px；
保证金：0；
}
.标题.导航a{
左侧填充：0；
}
.标题h1{
显示：内联块；
填充：10px；
保证金：0；
}
}
@仅介质屏幕和（最大宽度：400px）{
.col-md-6{
浮动：无；
背景色：无；
显示：内联块；
填充：10px；
保证金：0；
宽度：100%；
}
#正文{
浮动：无；
显示：内联块；
填充：10px；
保证金：0；
宽度：100%；
}
.标题.导航{
显示：内联块；
填充：10px；
保证金：0；
宽度：100%；
}
.标题.导航a{
左侧填充：0；
}
.标题h1{
显示：内联块；
填充：10px；
保证金：0；
宽度：100%；
}
span.text-content{
背景：rgba（0,0,0,0.5）；
颜色：白色；
光标：指针；
显示：表格；
高度：150像素；
左：0；
位置：绝对位置；
排名：0；
宽度：150px；
}
span.text-content span{
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
}
.img列表{
列表样式类型：无；
保证金：0；
填充：0；
文本对齐：居中；
}
.img列表{
显示：内联块；
高度：150像素；
利润率：0.1米1米0；
位置：相对位置；
宽度：150px；
}
span.text-content{
背景：rgba（0,0,0,0.5）；
颜色：白色；
光标：指针；
显示：表格；
高度：150像素；
左：0；
位置：绝对位置；
排名：0；
宽度：150px；
不透明度：0；
}
.img列表：悬停span.text-content{
不透明度：1；
}
span.text-content{
背景：rgba（0,0,0,0.5）；
颜色：白色；
光标：指针；
显示：表格；
高度：150像素；
左：0；
位置：绝对位置；
排名：0；
宽度：150px；
不透明度：0；
-webkit转换：不透明度500ms；
-moz转换：不透明度500ms；
-o-转变：不透明度500ms；
过渡：不透明度500ms；
}
}

标题
设计及；代码。

我删除了所有不必要的代码，因此您需要添加的内容将非常清楚。基本上，我们将

.caption

不透明度更改为

1

。绝对位于

.wrapper

中，并具有

和内部文本

.wrapper>a{
位置：相对位置；
z指数：0；
显示：块；
}
.wrapper>a>img{
宽度：100%；
}
.标题{
位置：绝对位置；
z指数：1；
左：0；
右：0；
排名：0；
底部：0；
显示器：flex；
对齐项目：居中；
证明内容：中心；
过渡：不透明度；
颜色：白色；
背景：rgba（0,0,255,0.5）；
不透明度：0；
}
.caption>span{
字体大小：48px；
}
.wrapper>a:悬停.caption{
不透明度：1；
}

---

我删除了所有不必要的代码，因此您需要添加的内容将非常清楚。基本上，我们将

.caption

不透明度更改为

1

。绝对位于

.wrapper

中，并具有

和内部文本

.wrapper>a{
位置：相对位置；
z指数：0；
显示：块；
}
.wrapper>a>img{
宽度：100%；
}
.标题{
位置：绝对位置；
z指数：1；
左：0；
右：0；
排名：0；
底部：0；
显示器：flex；
对齐项目：居中；
证明内容：中心；
过渡：不透明度；
颜色：白色；
背景：rgba（0,0,255,0.5）；
不透明度：0；
}
.caption>span{
字体大小：48px；
}
.wrapper>a:悬停.caption{
不透明度：1；
}

---

创建要相对于图像链接位置显示的文本，然后使用以下代码：

#wrapper.text{
位置：相对位置；
底部：30px；
左：0px；
可见性：隐藏；
}
#包装器：hover.text{
能见度：可见；
}

文本

<

@media only screen and (max-width: 400px) {

/* Your styles related to displaying the text are here*/

}