बूटस्ट्रैप

Question

के साथ ओवरले समस्या मुझे सीएसएस ओवरले में समस्याएं हैं। ओवरले पैटर्न छवि आकार की पूरी चौड़ाई पर फैला नहीं है। बाईं तरफ हमेशा एक छोटी सी सीमा होती है। कोई विचार? 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 का प्रयास करें:

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>

पी.एस. कृपया, कोड स्निपेट पोस्ट करने या बनाने से पहले अपना कोड प्रारूपित करें।