Overlay-Problem mit Bootstrap

Question

Ich habe Probleme mit dem CSS-Overlay. Das Überlagerungsmuster erstreckt sich nicht über die gesamte Breite der Bildgröße. Es gibt immer eine kleine Grenze auf der linken Seite. Irgendwelche Ideen? 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

Versuchen this:

1. table-layout: fixed zu .img-container;
2. width: 100% bis .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. Bitte formatieren Sie Ihren Code, bevor Sie ein Code-Snippet veröffentlichen oder erstellen.