title: Bootstrap: Display text on hover image
body: <p>I am creating a website for the first time with Bootstrap3 and have a page with 3 images which will be links to galleries. These images are not thumbnails.</p>
  
  <p>I have alternative images (B+W) for hovering and so my code currently changes the image from colour to B+W on hover. </p>
  
  <p>I want to be able to also include a text overlay on hover so people will know to click through to the gallery. So, I'm looking to add text on hover to the B+W image. Alternatively, I would make the colour image less opaque and add text to that, if it's easier!</p>
  
  <p>Here's my html code currently.</p>
  
  <pre><code>&lt;a href="landscapes.html"&gt; &lt;img src="landscape.jpg" alt="Landscape" onMouseOver="this.src='landscapebw.jpg'" onmouseout="this.src='landscape.jpg'" class="img-circle img-responsive"&gt; &lt;/a&gt; 
  </code></pre>
  
  <p>Thanks in advance.</p>