title: How to put text over img on hover - width and height are variable
body: <p>I know how to put text on hover on an image if the height and the width is fixed. but I have a responsive slider (owl-slider) and want to add link (easy - yeah.) and a blue overlay with white text in it and a simple fading/sliding transition from the overlay.</p>
  
  <p>The problem is: every item changes its height and width on resizing. I could write several media queries, but I'm quite sure there must be a simpler solution to that problem.</p>
  
  <p>I have a very simple markup:</p>
  
  <pre><code>&lt;div&gt;
   &lt;a href="#"&gt;
    &lt;img src="http://placehold.it/360x100"&gt;
    &lt;div class="overlay"&gt;Click here for more Infomartion&lt;/div&gt;
   &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Normally I would go for pure css method with setting height and width from .overlay to the image size and set visibility on hover. But.. that won't work, because the width &amp; height will differ from viewport to viewport. So, what would you suggest?</p>