title: Twitter Bootstrap Transparent Button
body: <p>I have an image overlay on hover which also has a button.</p>
  
  <p>My issue is that that button is also becoming transparent on hover, and would not like this to be the case.</p>
  
  <p>Here is a JSFiddle of what is current occurring: <a href="http://jsfiddle.net/XgGFf/37/" rel="nofollow noreferrer">http://jsfiddle.net/XgGFf/37/</a></p>
  
  <p>Ideally this is what I would want it to look like:</p>
  
  <p><img src="https://i.stack.imgur.com/3J9oE.png" alt="enter image description here"></p>
  
  <p>Adjusting the overlay class effects the button opacity as well (in my styles.css:688):</p>
  
  <pre><code>    .ca-item-main figcaption {
          height: 100%;
          width: 100%;
          opacity: 0;
          text-align: center;
          -webkit-backface-visibility: hidden;
          -moz-backface-visibility: hidden;
          backface-visibility: hidden;
          -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
          -moz-transition: -moz-transform 0.3s, opacity 0.3s;
          transition: transform 0.3s, opacity 0.3s;
      }
  </code></pre>