Image behind content in Div - html

Question

I am trying to create something similar to the attached image where the images show up all of the time and then on hover the content shows up with the color overlay.
Right now I have the images as a background to the div, but I'm not sure if that's the best way to go about this because I cannot find a way to make the image be the correct height in the div. The link is mtmdevbox.com
Thanks in advance!
HTML
<div class="homepage-content img-one">
<div class="hidden-content">
<h1> For Guests </h1>
<p> Usdaerum explaudae officto commossum seque delitiae. Rate conempo rectio ius ium- quun tinullaborum dentiunt. Tem in re occatem poreperum aut faciae escia dolute pore pro volo ex etur? Offictet doluptas aruptam eos qui temossimet voloria tes- tiam reium harum sum </p>
</div>
</div>
CSS
.img-one {
background-image: url(/wp-content/uploads/2015/07/homepage_images-03.jpg); background-repeat: no-repeat;
width: 65%;
background-size: 100%;
float: right;
clear: both;}
screenshot of design

Answer 1

I think this is what you're after. Let me know if it helps!
<div class="article">
<div class="content">
<h1>
This is your title
</h1>
<p>
This is your content
</p>
</div>
</div>
CSS
.article { display: block; min-height: 500px; background: url("http://placehold.it/500x500"); background-size: cover; }
.content { display: none; margin: 0; padding: 15px; background: rgba(0, 0, 0, .5); position: relative; min-height: calc(500px - 30px); width: 30%; }
.content h1 { margin: 0; padding: 0; }
.article:hover .content { display: block; }
https://jsfiddle.net/2rb18h0r/

Answer 2

Rather than floating the elements, you can use positioning instead. Something like:
.img-one {
background-image: url("http://i.imgur.com/5BK0htU.png");
/*background-repeat: no-repeat;*/
width: 100%;
height: 300px;
position: relative;
background-size: 100%;
cursor: pointer;
}
.img-one .hidden-content {
position: absolute;
opacity: 0.2;
transition: all 0.4s;
left: calc(35% - 10px);
width: 65%;
height: 100%;
background: rgba(200, 200, 200, 0.4);
border-left: 10px solid white;
}
.img-one:hover .hidden-content {
opacity: 1;
}
.hidden-content h1 {
margin-left: 5%;
}
.hidden-content p {
width: 35%;
margin-left: 5%;
}
<div class="homepage-content img-one">
<div class="hidden-content">
<h1> For Guests </h1>
<p>Usdaerum explaudae officto commossum seque delitiae. Rate conempo rectio ius ium- quun tinullaborum dentiunt. Tem in re occatem poreperum aut faciae escia dolute pore pro volo ex etur? Offictet doluptas aruptam eos qui temossimet voloria tes- tiam
reium harum sum</p>
</div>
</div>
In the above demo I have set the opacity to 0.2, however setting this to 0 will allow a complete 'hidden' state.
I have decided to use the opacity CSS instead of display:hidden|none as it will allow for transitions/smooth fade in effects. If you don't want that, you can set the initial state of display:hidden and then on the hover state use display:block|inline-block