Bootstrap 的叠加问题

Question

我在使用 CSS 叠加层时遇到问题。覆盖图案不会在图像尺寸的整个宽度上拉伸。左侧始终有一个小边框。有任何想法吗？ http://www.bootply.com/FrnoIvUpxS

.img-container {
    position: relative;
    cursor: pointer;
    display: table;
    overflow:hidden;
text-align:center;  
width:100%;
min-height: 360px;
}

.img-container img {
 opacity: 1;
    position: absolute;
    min-height:360px;
    width: 500px;
}


.img-container .overlay {

    position: relative;

    height: 100%;
    vertical-align:middle;
    display: table-cell;
    background-color:rgba(130,216,209,0.00);
    opacity:0.0;
}


.img-container p{
    width:inherit;
    margin-top:25px;
    } 
.img-container h3 {

     } 
.img-container:hover .overlay {
background-color:rgba(130,216,209,0.9); 

        opacity:1;
 }
 .img-container:hover img{
        -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
    opacity:1;}

    .img-container:hover p, .img-container:hover h3 { }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4">

<div class="img-container">
  <img src="http://placehold.it/500x500" class="img-responsive" alt="">
  <div class="overlay">
  <h3>TIBET</h3>
  <p>RISING IN THE NORTH</p>
  </div>
  </div>

</div>
<div class="col-md-4">
<div class="img-container">
  <img src="http://placehold.it/500x500" class="img-responsive" alt="">
  <div class="overlay">
  <h3>POKER</h3>
  <p>PLAY YA CARDS RIGHT</p>
  </div>
  </div>

</div>
<div class="col-md-4">
<div class="img-container">
  <img src="http://placehold.it/500x500" class="img-responsive" alt="">
  <div class="overlay">
  <h3>INDUSTRY</h3>
  <p>MACHINES THAT DO IT</p>
  </div>
  </div>
</div>
</div>

</div>

Answer 1

尝试 this:

table-layout: fixed 到 .img-container;
width: 100% 到 .img-container .overlay.

.img-container {
    position: relative;
    cursor: pointer;
    display: table;
    table-layout: fixed;
    overflow: hidden;
    text-align: center;
    width: 100%;
    min-height: 360px;
}

.img-container img {
    opacity: 1;
    position: absolute;
    min-height: 360px;
    width: 500px;
}

.img-container .overlay {
    position: relative;
    height: 100%;
    vertical-align: middle;
    display: table-cell;
    width: 100%;
    background-color: rgba(130, 216, 209, 0.00);
    opacity: 0.0;
}

.img-container p {
    width: inherit;
    margin-top: 25px;
}

.img-container:hover .overlay {
    background-color: rgba(130, 216, 209, 0.9);
    opacity: 1;
}

.img-container:hover img {
    -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
    opacity: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="img-container">
                <img src="http://placehold.it/500x500" class="img-responsive" alt="">
                <div class="overlay">
                    <h3>TIBET</h3>
                    <p>RISING IN THE NORTH</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="img-container">
                <img src="http://placehold.it/500x500" class="img-responsive" alt="">
                <div class="overlay">
                    <h3>POKER</h3>
                    <p>PLAY YA CARDS RIGHT</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="img-container">
                <img src="http://placehold.it/500x500" class="img-responsive" alt="">
                <div class="overlay">
                    <h3>INDUSTRY</h3>
                    <p>MACHINES THAT DO IT</p>
                </div>
            </div>
        </div>
    </div>
</div>

P.S. 请在发布或创建代码片段之前格式化您的代码。

Bootstrap 的叠加问题

Overlay issue with Bootstrap

html

css

overlay

twitter-bootstrap