title: Div overlay on a responsive image
body: <p><a href="http://jsfiddle.net/LFtHg/" rel="nofollow">http://jsfiddle.net/LFtHg/</a></p>
  
  <p>I'm trying to create my first responsive website. For this, I'm including an image. This image has a caption which should be displayed in a transparent overlay. However because opacity settings are passed to child elements, I have removed the text from the container.</p>
  
  <p>I cant get the overlay to display, at all (because it has no content inside it). I cant really add a fixed height as I want to image to respond to changes in browser size. How can I ensure this is displayed?</p>
  
  <p>Thank you,
  J</p>
  
  <p>Edit, also what would the best way to scale the overlay as the browser resizes. I'm unsure if this approach is even possible.</p>