Twitter Bootstrap Прозрачная кнопка

Question

У меня есть наложение изображений на зависание, которое также имеет кнопку.

Моя проблема заключается в том, что эта кнопка также становится прозрачной при наведении курсора, и не хотелось бы, чтобы это было так.

Вот JSFiddle того, что ток происходит: http://jsfiddle.net/XgGFf/37/

В идеале это то, что я хотел бы, чтобы это выглядело как:

Настройка Эффекты класса наложения кнопку непрозрачности, а также (в моем 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

при использовании opacity изменении значение для всех элементов и элементов внутри. Вы можете управлять стоимостью rgba для фона, как это:

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

Демонстрационная http://jsfiddle.net/XgGFf/42/