ポートフォリオホバーオーバーレイがイメージサイズに残りません

Question

私のポートフォリオサイトでは、ポートフォリオイメージの上にマウスを置くとタイトルとカテゴリがオーバーレイされます。私の問題は、オーバーレイセクションがグリッド内の画像の間隔のためにマージンとパディングを取り上げていることです。ポートフォリオのイメージサイズが何であれ、イメージ間のガターを除去することなくそれを得ることはできません。以下

例：

これを修正すると、任意の助けをいただければ幸いかわかりません。

.thumbnail { 
 
    padding: 0px !important; 
 
    margin-bottom: 25px; 
 
    border: none; 
 
    border-radius: 0; 
 
    display: block; 
 
} 
 

 
.thumbnail img { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin-bottom: 0px; 
 
    display: block; 
 
} 
 

 
.overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    opacity: 0; 
 
    padding: 0px 0px 0px 0px; 
 
    transition: .5s ease; 
 
    background-color: rgba(136, 24, 38, 0.6); 
 
} 
 

 
.thumbnail:hover .overlay { 
 
    opacity: 1; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.text { 
 
    color: white; 
 
    font-size: 20px; 
 
    position: absolute; 
 
    width: 70%; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
}

<section id="work" class="bg-grey"> 
 
    <div class="container-fluid text-center"> 
 
    <h2>MY WORK</h2> 
 
    <!--<h4>What we have created</h4>--> 
 
    <div class="row text-center"> 
 

 
     <div class="col-md-4 col-sm-6 col-xs-12"> 
 
     <a href="http://www.google.com/"> 
 
      <div class="thumbnail"> 
 
      <img src="images/portfolio-img1.jpg" alt="PORTFOLIO NAME"> 
 
      <div class="overlay"> 
 
       <div class="text"> 
 
       <h4>PORTFOLIO NAME</h4> 
 
       <p>category</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </a> 
 
     </div> 
 

 
     <div class="col-md-4 col-sm-6 col-xs-12"> 
 
     <a href="http://www.google.com/"> 
 
      <div class="thumbnail"> 
 
      <img src="images/portfolio-img1.jpg" alt="PORTFOLIO NAME"> 
 
      <div class="overlay"> 
 
       <div class="text"> 
 
       <h4>PORTFOLIO NAME</h4> 
 
       <p>category</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </a> 
 
     </div> 
 

 
     <div class="col-md-4 col-sm-6 col-xs-12"> 
 
     <a href="http://www.google.com/"> 
 
      <div class="thumbnail"> 
 
      <img src="images/portfolio-img1.jpg" alt="PORTFOLIO NAME"> 
 
      <div class="overlay"> 
 
       <div class="text"> 
 
       <h4>PORTFOLIO NAME</h4> 
 
       <p>category</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </a> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</section>

Answer 1

あなたはabsolute位置付け要素を使用する場合は、必ず、relativeそれぞれの位置の要素を設定します。出力に問題がある場合はお知らせください。

CSSの変更は、以下のクラスにのみ適用されます。ここでは、プロパティposition: relativeを追加しました。

.thumbnail { 
    padding: 0px !important; 
    position: relative; 
    margin-bottom: 25px; 
    border: none; 
    border-radius: 0; 
    display: block; 
} 

だから、クラスoverlayであなたの絶対位置のdivは、クラスthumbnail

.thumbnail { 
 
    padding: 0px !important; 
 
    position: relative; 
 
    margin-bottom: 25px; 
 
    border: none; 
 
    border-radius: 0; 
 
    display: block; 
 
} 
 

 
.thumbnail img { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin-bottom: 0px; 
 
    display: block; 
 
} 
 

 
.overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    opacity: 0; 
 
    padding: 0px 0px 0px 0px; 
 
    transition: .5s ease; 
 
    background-color: rgba(136, 24, 38, 0.6); 
 
} 
 

 
.thumbnail:hover .overlay { 
 
    opacity: 1; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.text { 
 
    color: white; 
 
    font-size: 20px; 
 
    position: absolute; 
 
    width: 70%; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<section id="work" class="bg-grey"> 
 
    <div class="container-fluid text-center"> 
 
    <h2>MY WORK</h2> 
 
    <!--<h4>What we have created</h4>--> 
 
    <div class="row text-center"> 
 

 
     <div class="col-md-4 col-sm-6 col-xs-12"> 
 
     <a href="http://www.google.com/"> 
 
      <div class="thumbnail"> 
 
      <img src="http://lorempixel.com/100/100/" alt="PORTFOLIO NAME"> 
 
      <div class="overlay"> 
 
       <div class="text"> 
 
       <h4>PORTFOLIO NAME</h4> 
 
       <p>category</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </a> 
 
     </div> 
 

 
     <div class="col-md-4 col-sm-6 col-xs-12"> 
 
     <a href="http://www.google.com/"> 
 
      <div class="thumbnail"> 
 
      <img src="http://lorempixel.com/100/100/" alt="PORTFOLIO NAME"> 
 
      <div class="overlay"> 
 
       <div class="text"> 
 
       <h4>PORTFOLIO NAME</h4> 
 
       <p>category</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </a> 
 
     </div> 
 

 
     <div class="col-md-4 col-sm-6 col-xs-12"> 
 
     <a href="http://www.google.com/"> 
 
      <div class="thumbnail"> 
 
      <img src="http://lorempixel.com/100/100/" alt="PORTFOLIO NAME"> 
 
      <div class="overlay"> 
 
       <div class="text"> 
 
       <h4>PORTFOLIO NAME</h4> 
 
       <p>category</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </a> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</section>