Image width dynamic height overlay

Question

I am trying to build an overlay (mouseover) on a image with dynamic height:

<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%; }

Unfortunately the height of "over_menu" is too large, it shows until the whole rest of the page. How else can I fix this?

Answer 1

Give position: relative; to the parent, so that its boundaries are within it:

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

Answer 2

You should move the over_menu to inside 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>

Of course you should change your :hover condition as well. It would be helpful if you could add a JSFiddle to your question.