幻灯片上的标题内容的不透明度未设置为1

Question

我有一个带有文字和按钮的标题，当你将鼠标悬停在图像上时会出现。现在我设置的标题显示为.7不透明度，似乎文本和按钮等似乎继承了不透明度而不是显示为1.不透明度。我知道将孩子设置为1.仍将100％完成父母的.7所以它就是这样的。 0.7。因此，我需要一种可行的css方式来改变它。 这里是代码的小提琴：http://jsfiddle.net/dottsie/tvdefhom/1/

<header>
            <h1>Caption Hover Effects</h1> 
</header>

            <ul class="grid cs-style-1 cs-style-2">

           <li>
               <figure>
               <img src="http://www.ruggit.dk/media/catalog/product/cache/1/image/650x/040ec09b1e35df139433887a97daa66f/_/m/_mg_9746_1.jpg" alt="img04">
                <figcaption> 
                    <h3>Rug1</h3>
                    <span>Mario</span>
                    <a href="http://google.com">buy</a>


                                           </figcaption>