html - 使用 Bootstrap 和图像网格将鼠标悬停在背景图像上

Question

我的问题如下:

• 我想在客户将鼠标悬停在图像上时添加图像叠加层-盒子。
• 图像作为背景图像实现。
• Bootstrap 提供自动边距，这使我的叠加层比图片大

• 删除填充并在图像框之间添加空间后边缘响应不再起作用

• 问题:如何将彩色叠加层添加到我的图像框，同时保持图像之间的响应性和差距。如您所见:图片
  更改屏幕尺寸后，框不适应 col-xs-6。他们留在4 列。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');


.produkt-img {
  padding-bottom: 133.33333%; 
  background-size: cover;
}

.produkt-1 {
  background-image: url('http://placehold.it/600x800/fc0');
}

.produkt-2 {
  background-image: url('http://placehold.it/600x800/fc0');
}

.produkt-3 {
  background-image: url('http://placehold.it/600x800/fc0');
}

.produkt-4 {
  background-image: url('http://placehold.it/600x800/fc0');
}
             
        
        
.produkt-box-overlay-text {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
        
        
.produkt-overlay:before{
  position: absolute;
  content:" ";
  top:0;
  left:0;
  width:100%;
  height:100%;
  display: none;
  z-index:0;
}

.produkt-overlay:hover:before{
  display: block;
}

.overlay-farbe:before {
/* grauer overlay background-color: rgba(50, 50, 50, 0.05)*/
 background-color: rgba(199, 87, 36, 0.1);
}
        
.col-sm-3, produkt-width {
    padding: 0px;
    margin: 0.5%;
    width: 23.75%;
        }
               
        
.col-sm-3 extra-margin {
    margin-left:1%;  
        }

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-xs-6 produkt-width produkt-overlay overlay-farbe">
     <div class="produkt-img produkt-1"></div>
    </div>
    <div class="col-sm-3 col-xs-6 produkt-width produkt-overlay overlay-farbe">
     <div class="produkt-img produkt-2"></div>
    </div>
    <div class="col-sm-3 col-xs-6 produkt-width produkt-overlay overlay-farbe">
    <div class="produkt-img produkt-3"></div>
    </div>
    <div class="col-sm-3 col-xs-6 produkt-width produkt-overlay overlay-farbe">
     <div class="produkt-img produkt-4"></div>
    </div>
  </div>
</div>
      

Answer 1

因为您使用的是背景图片而不是使用 <img>您可以通过伪元素在使用背景图像的元素上使用叠加层。移动以下类，.produkt-overlay和 .overlay-farbe ，从列元素到背景元素。您也可以将这些类中的一些属性合并到 .produkt-img 中。如果您想简化事情，请上课。

注意:我注意到您尝试更改 Bootstrap 列的宽度并用边距替换填充。进行这些更改时要小心。 Bootstrap 做他们所做的事情并打算以某种方式工作是有原因的。不了解 Bootstrap 的一些方法和原因，在修改他们所做的事情时很容易误入歧途。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.produkt-img {
  position: relative;
  padding-bottom: 133.33333%;
  background-size: cover;
}

.produkt-1 {
  background-image: url('http://placehold.it/600x800/fc0');
}

.produkt-2 {
  background-image: url('http://placehold.it/600x800/fc0');
}

.produkt-3 {
  background-image: url('http://placehold.it/600x800/fc0');
}

.produkt-4 {
  background-image: url('http://placehold.it/600x800/fc0');
}

.produkt-overlay:before {
  position: absolute;
  content: " ";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 0;
}

.produkt-overlay:hover:before {
  display: block;
}

.overlay-farbe:before {
  background-color: rgba(199, 87, 36, 0.1);
}

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-xs-6">
      <div class="produkt-img produkt-overlay overlay-farbe produkt-1"></div>
    </div>
    <div class="col-sm-3 col-xs-6">
      <div class="produkt-img produkt-overlay overlay-farbe produkt-2"></div>
    </div>
    <div class="col-sm-3 col-xs-6">
      <div class="produkt-img produkt-overlay overlay-farbe produkt-3"></div>
    </div>
    <div class="col-sm-3 col-xs-6">
      <div class="produkt-img produkt-overlay overlay-farbe produkt-4"></div>
    </div>
  </div>
</div>