使用Bootstrap简单响应图像悬停

Question

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

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

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

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

第二个屏幕截图显示客户悬停在图片上时的图片。如你看到的。当顾客悬停在网格图片上时，图片的叠加层将变为深灰色。文本框及其内容仍为白色。

伙计们，我要感谢你们，我希望我们能找到解决方案。来自柏林的Cheeeeers和问候！

Answer 1

您可以将图片放在div（黑色背景）中，然后在图片悬停时将图片opacity设置为约0.7。

＆＃13;

＆＃13;

.fade {
  position: relative;
  background-color: #000;
  display: inline-block;
}

.fade p {
  /* Prevent paragraph from changing .fade size (set position) */
  margin: 0;
  padding: 0;
  display: block;
  position: absolute;
  bottom: 10px;
  left: 5px;
  /* Set z-index to prevent image covering */
  z-index: 1;
  /* Set background */
  background-color: white;
}

.fade img {
  transition: opacity 0.25s;
  display: block;
}

.fade img:hover {
  opacity: 0.7;
}

＆＃13;

<p>Hover the image</p>

<div class="fade">
  <p>This won't be faded</p>
  <img src="https://placeholdit.imgix.net/~text?txtsize=23&bg=ffffff&txtclr=000000&txt=250%C3%97250&w=250&h=250"></img>
</div>

＆＃13;

＆＃13;

＆＃13;