Html 图像宽度动态高度叠加

我正在尝试在具有动态高度的图像上构建覆盖（鼠标覆盖）：

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

---

不幸的是，“over_menu”的高度太大，它会一直显示到页面的其余部分。我还能怎么解决这个问题呢？

给出

位置：相对编码到父对象，以便其边界位于父对象内：

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

您应该将
over_菜单
移动到
菜单内

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


正文

当然，您也应该更改
：hover
条件。如果您可以在问题中添加一个JSFIDLE，这将非常有用。
Eugen，如果您在项目中广泛使用
。三分之一
，您可能希望使选择器更具体：
。某个特定的父级。三分之一{position:relative；}
。在整个项目中更改框架的构建块元素的位置不是一个好主意。
<div id="one-third">
   <div class="menu_bg">
       <div class="over_menu">Text</div>
       <img src="one.jpg" class="resp-img">
   </div>
</div>