Html 使用引导简单响应图像悬停

我是一名编程新手，需要专业人士的帮助

我正在使用bootstrap构建一个新网站。在我的Slier下面，我想添加两行和两列

• （第1行第1列：col-lg-8，第2列：col-lg-4）
• （第2行第1列：col-lg-6，第2列：col-lg-6）

对于每一列，我想使用不同的（全宽行）背景图像和文本框。这是用户将鼠标悬停在元素上之前的布局。如您所见，图像和带有白色背景和一些文本的文本框之间存在一定的间距：

当客户将鼠标悬停在图片上时，第二个屏幕截图显示图像。如你所见。当客户将鼠标悬停在网格的图片上时，图片的覆盖层将变为深灰色。文本框及其内容仍为白色

---

伙计们，我要感谢你们，我希望我们能找到解决办法。来自柏林的奶酪和问候

您只需将图像放入

div

（黑色背景）中，然后在图像悬停时，将图像

不透明度设置为大约
0.7


.fade{
位置：相对位置；
背景色：#000；
显示：内联块；
}
.褪色{
/*防止段落更改。淡入淡出大小（设置位置）*/
保证金：0；
填充：0；
显示：块；
位置：绝对位置；
底部：10px；
左：5px；
/*设置z索引以防止图像覆盖*/
z指数：1；
/*背景*/
背景色：白色；
}
.淡入淡出{
过渡：不透明度0.25s；
显示：块；
}
.淡入淡出：悬停{
不透明度：0.7；
}
将图像悬停

这不会褪色的

您能否将代码的相关部分（且仅相关部分）添加到问题中，以便我们提供帮助？