title: Text Overlay on Image Hover - Responsive
body: <p>I am using this tutorial to create an overlay on my images with text:</p>
  
  <p><a href="http://codepen.io/pdelsignore/pen/uqenH" rel="nofollow">http://codepen.io/pdelsignore/pen/uqenH</a></p>
  
  <p>It works great, however I have a responsive website and if I try to enter a % as the width / height of the '.box' the image disappears. It appears it can only be a fixed with (i.e. px) which obviously doesn't scale. </p>
  
  <pre><code>.box {  
  cursor: pointer;  
  height: 250px;   
  position: relative;  
  overflow: hidden;  
  width: 400px;
  font-family: 'Open Sans', sans-serif;
  }  
  </code></pre>
  
  <p>Does anyone have any ideas? Thanks in advance!</p>