サムネイルの全領域を占有してオーバーレイのテキストがはみ出ないようにするにはどうすればよいですか？

Question

オーバーレイdiv（ "11月"）とslideToggle div（ "女性& STEMの女の子"）が突き出ないように、サムネイル内の画像をサムネイルの全領域を占有するにはどうすればよいですか？私は写真を添付し​​、私のコードを含んでいます。

jQueryとBootstrapを使用しています。ユーザーが画像の上を移動すると、slideToggleが上にスライドし、マウスが離れると消えます。しかし、それはイメージに合っていません。 11月のオーバーレイもありません。とてもイライラしています。

enter image description here

$(document).ready(function() { 
 
    $('.thumbnail').hover(function() { 
 
     $('.slider', this).slideToggle('fast'); 
 
    }); 
 
    //$('.thumbnail').hover(function() { 
 
    // $('.slider', this).animate({ 
 
    //  opacity: 0.75, 
 
      
 
    //  height: "toggle" 
 
    // }, 750, function() { 
 
    //  //Animation complete. 
 
    // }); 
 
    //}); 
 

 
});

.womens-overlay { 
 
    position: absolute; 
 
    background: rgba(0,0,0,1); 
 
    top: 0; 
 
    right: 0; 
 
    padding: 2%; 
 
    width: 35%; 
 
    color: #FFFFFF; 
 
} 
 

 
/*Removes the automatic thumbnail frames.*/ 
 
.thumbnail { 
 
    border: none; 
 
    box-shadow: none; 
 
    float: left; 
 
    position: relative; 
 
    margin: 5px; 
 
    color: #333; 
 
} 
 

 
.thumbnail img { 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
} 
 

 
.thumbnail .slider { 
 
    border: none; 
 
    box-shadow: none; 
 
    display: none; 
 
    opacity: 0.8; 
 
    background: #D2D6E2; 
 
    width: 100%; 
 
    position: absolute; 
 
    bottom:4px; 
 
    padding: 5px; 
 
} 
 

 
.slider { 
 
    position: absolute; 
 
    padding-top: 0%; 
 
}

  <div class="col-sm-6 col-md-4"> 
 
       <div class="image-box"> 
 
        <div class="thumbnail"> 
 
         <img src="Images/celebrating-women-in-stem.jpeg" /> 
 
         <div class="womens-overlay"> 
 
          <h3>November</h3> 
 
         </div> 
 
         <div class="slider"> 
 
          <h2>Women & Girls in STEM Month</h2> 
 
          <h3>EVENT</h3> 
 
          <p>This November, we are celebrating women and girls in STEM. Come join us!</p> 
 
          <button type="button" class="btn btn-primary">Learn More</button> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div>

Answer 1

それは、複数のサムネイル上で動作するように、各機能を追加します。次に、サムネイルの高さを取得し、.sliderの高さを同じに設定します。

$(document).ready(function() { 
    $('.thumbnail').each(function(){ 
      // get height 
      var height = $(this).height(); 
      // set slider height 
      $(this).children('.slider').css({'height':height+'px'}); 
      $(this).hover(function() { 
       $(this).children('.slider').slideToggle('fast'); 
      }); 
     }); 
}); 

はその後、オーバーフロー設定：.thumbnailに隠された

.thumbnail { 
    border: none; 
    box-shadow: none; 
    float: left; 
    position: relative; 
    margin: 5px; 
    color: #333; 
    overflow: hidden; 
} 

フィドル - https://fiddle.jshell.net/Jim_Miraidev/xrevsesq/