Html 文本图像的悬停效果

我不知道如何在照片中制作文字，以及在整个照片中制作链接。我已经做了一个变暗的效果，我不想改变，我只想添加文本到它。我真的想保持当前的维度，最重要的是，保持响应能力

有指向代码笔的链接：“”

body，html{
身高：100%；
}
.标题{
位置：绝对位置；
左：0；
最高：50%；
宽度：100%；
文本对齐：居中；
颜色：#000；
}
.反应迅速{
宽度：100%；
最大宽度：88px；
高度：自动；
位置：中心；
}
.tz画廊.row>div{
填充：2px；
利润底部：4倍；
}
.tz画廊。灯箱图片{
宽度：100%；
边界半径：0；
位置：相对位置；
}
@介质（最大宽度：768px）{
身体{
填充：0；
}
}
.褪色{
不透明度：1；
过渡：不透明度。25秒缓进缓出；
-moz过渡：不透明度。25秒缓进缓出；
-webkit过渡：不透明度。25秒易入易出；
}
.消失：悬停{
不透明度：0.5；
}

---

如果我理解正确，您希望能够在图片顶部发布链接（链接可以是a-href、h1、h2、span等）。为此，请执行以下操作： 1.编写容器div。例如：

<div>
text
</div>

文本

将其样式（CSS）设置为所需的背景图片。确保div的大小适合图片大小。然后，在div中，您可以简单地写下您想要的标记（文本）。例如：

<div>
text
</div>

文本

---

现在事情变得有趣了。要在div中定位文本？=>将div的位置设置为相对（位置：relative；），并将范围位置设置为绝对。然后在Absolute位置的上/左/下/右位置进行播放，文本将显示在您希望它显示的任何位置。

这是一个更新的代码笔

它添加了一个容器，其中包含一些文本，但使其不透明，然后悬停，而不是使其不可见（如图像），它使其更可见

.fade:hover .description {
   opacity: 1;
}

.description {
   position: absolute;
   z-index: 100;
   opacity: 0;
   color: #fff;
   font-size: 20px;
}

.tz gallery.row>div{
填充：2px；
利润底部：4倍；
}
.tz画廊。灯箱图片{
宽度：100%；
边界半径：0；
位置：相对位置；
}
.img文本框{
位置：绝对位置；
底部：0；
背景：rgba（0,0,0,0.479）；
颜色：#ffffff；
宽度：100%；
填充：20px；
字体系列：Arial；
字号：17px；
}
.褪色{
不透明度：1；
过渡：不透明度。25秒缓进缓出；
-moz过渡：不透明度。25秒缓进缓出；
-webkit过渡：不透明度。25秒易入易出；
颜色：#e9e9e9；
}
.消失：悬停{
不透明度：0.5；
}

@kelvin非常感谢！我已经使用了您的帮助，但我不明白如何确保文本没有变暗，并且我希望文本集中在图片上：（你能帮我吗？@pabloks看了看同一个代码笔，我做了一些更改。我想其中一个附加的css或js与.fade类有冲突；我没有看得太深，我只是将它改为.fadeMe。我还在description类上添加了一些样式以使文本居中。