圖片寬度動態高度疊加

Question

我正在嘗試在具有動態高度的圖像上構建疊加層（鼠標懸停）：

<div id="one-third">
 <div class="over_menu">Text</div>
 <div class="menu_bg"><img src="one.jpg" class="resp-img"></div>
</div>

CSS

.one-third { width: 33.3333%; }
.menu_bg img { width: 100%; height: auto; }
.menu_bg { position:relative; width: 100%; }
.over_menu { position: absolute; z-index:2; background-color:rgba(0,0,0,0.5); color: #FFFFFF; height: 100%; }

不幸的是，"over_menu" 的高度太大，它顯示到整個頁面的其余部分。 我還能怎么解決這個問題？

Answer 1

給出position: relative; 到父級，以便其邊界在其中：

.one-third { width: 33.3333%; position: relative; }

Answer 2

你應該移動over_menu里面menu_bg

<div id="one-third">
   <div class="menu_bg">
       <div class="over_menu">Text</div>
       <img src="one.jpg" class="resp-img">
   </div>
</div>

當然，您也應該更改:hover條件。 如果您可以在問題中添加 JSFiddle，那將會很有幫助。