Bootstrap覆盖问题

Question

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

＆＃13;

＆＃13;

.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 { }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试this：

1. table-layout: fixed至.img-container;
2. 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。请在发布或创建代码段之前格式化代码。