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>

Answer 2

由于css无效，响应性被打破：

.col-sm-3, produkt-width
.col-sm-3 extra-margin

这里是对叠加层的修正css（仅附加了更改的行）：

.produkt-overlay:before{
  left: 15px; /*gutter width*/
  width: calc(100% - 30px); /*gutter width multiplied by 2*/
}

The complete example

使用Bootstrap和Image Grid在背景图像上悬停叠加

2 个答案: