hover on an <img> to make a new div - html

Question

I'm trying to have it so that when I hover on an <img> tag, a div will appear over it. I want it to be a white overlay with text inside of it.
I cannot make the image a background-image, as much as I would like to. My code uses width:percent/max-width:pixels and height:auto/max-height:pixels, so without the img there, nothing would show up. And to my knowledge, there is no solution to that issue.
I attempted to give the image a unique id and apply a id:hover .class to have the div appear, but it didn't respond to any coding I gave it, let alone work right. I then tried putting the id on a div of its own over putting it on the picture with still no yield.
I also tried to make a div with the image as a background pic and made the hover as desired. I tried to make the div not implode by putting in another div that has the image constraints, but because of the height:auto, it didn't work.
I refuse to set height/width as pixels, as it would mess up the rest of my coding and one of the major reasons I'm coding what I am. So, if it's not possible because of this, that's fine; Just tell me.
My CSS is as follows:
#logo {
text-align: center;
width:100%;
max-width:769px;
height:auto;
overflow:hidden;
}
#bannerpic {
max-width:769px;
max-height:300px;
width:100%;
height:auto;
}
#bannerpic .logobody {
display:none;
}
#bannerpic:hover .logobody {
display:inline;
background-color:rgba(255,255,255,0.5);
width:100%;
height:100%;
}
My HTML is this:
<div id="logo">
<img id="bannerpic" src="https://dl.dropboxusercontent.com/u/67673862/logoTEMP.png">
<div class="logobody">text</div>
</img>
</div>

Answer 1

I don't know if you need to be able to click the image, but you can overlay text with absolute positioning.
#logo {
text-align: center;
height: auto;
overflow: hidden;
position: relative;
max-width: 469px;
}
#bannerpic {
width: 100%;
height: auto;
}
.logobody {
position: absolute;
background-color: pink;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
-webkit-transition: opacity .3s;
transition: opacity .3s;
}
.logobody:hover {
opacity: 1;
}
<div id="logo">
<img id="bannerpic" src="https://dl.dropboxusercontent.com/u/67673862/logoTEMP.png" />
<div class="logobody">text</div>
</div>

Answer 2

How about this:
#logo {
position: absolute;
z-index: 1;
left: 0;
top: 0;
}
.logobody {
position: absolute;
z-index: 2;
left: 0;
top: 0;
background-color: rgba(255,255,255,0.75);
visibility: hidden;
height: 100%;
width: 100%;
}
#logo:hover .logobody{
visibility: visible;
}
#bannerpic {
max-width:769px;
max-height:300px;
width:100%;
height:auto;
}
Here's a JSFiddle link for it:
https://jsfiddle.net/zVBDc/790/embedded/result/
Note: My example is using 0.75 alpha for the background. 0.5 seemed too low. Set it to whatever you prefer, though.