title: Adding overlay to Bootstrap Thumbnail Image on hover within a well
body: <p>I have a bootstrap well. Within the well I have a thumbnail image. What I am trying to do is whenever i hover over the image, I want there to be a black overlay on-top of the image e.g. rgba(0,0,0,0.5). Currently, this is what I have:</p>
  
  <pre><code>.
  </code></pre>
  
  <p>You can see the actual code and current output on my Codepen (it is a little lengthy) : <a href="http://codepen.io/csapty12/pen/mEKKgd" rel="nofollow">click here for what I currently have</a></p>
  
  <p>As you can see from the Pen, when I hover over the image, the overlay occurs, but below the actual image, rather than on the image. Ideally I want this to sit in such a way that when i resize my screen e.g. for mobile phones, the overlay should stay in proportion with the image. I tried with media queries but that was a very poor idea. How can I cause the overlay to sit on-top of the image which in turn would get rid of the excess space at bottom of the well?</p>