Twitter Bootstrap Transparent Button

Question

I have an image overlay on hover which also has a button.

My issue is that that button is also becoming transparent on hover, and would not like this to be the case.

Here is a JSFiddle of what is current occurring: http://jsfiddle.net/XgGFf/37/

Ideally this is what I would want it to look like:

Adjusting the overlay class effects the button opacity as well (in my styles.css:688):

    .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;
    }

Answer 1

When you use opacity you change the value for all the element and elements inside. You may want to manage the rgba value for the background like this:

.figTop {
  display:inline-block;
}
.no-touch .ca-item-main figure:hover figcaption, .ca-item-main figure.cs-hover figcaption   {
  opacity:1;
}
.ca-item-main figcaption {
  background: rgba(39, 48, 66, 0.6);
}

The demo http://jsfiddle.net/XgGFf/42/