How do I make Cycle 2 overlay text non-transparent?

I am using Cycle 2 here with the overlay feature. The opacity control for the background is working correctly but I need the text to be solid white. I have tried the following to modify it but can't get it to respond properly.

Here is the Cycle code:

<div class="cycle-slideshow" 
data-cycle-fx=fade
data-cycle-timeout=5000
data-cycle-pager=".cycle-pager"
>
<!-- empty element for overlay -->
<div class="cycle-overlay"></div>

<img src="images/slider-1.jpg" 
data-cycle-title="From Your Door to our Store!" 
data-cycle-desc="Learn about our route services...">
<img src="images/slider-2.jpg" 
data-cycle-title="From Your Door to our Store!" 
data-cycle-desc="Learn about our route services...">
</div><!-- /.cycle-slideshow -->
<div class="cycle-pager"></div>

Here is the CSS I tried:

.cycle-overlay div {
    font: small-caps 400 32px "futura-pt",sans-serif;
    color: #fff; 
    opacity: 1;
    z-index: 1000; 
}

I would appreciate any guidance in resolving this.

Solution

You shouldn't use opacity in that case. Use background-color with rgba. Here's the code you should be writing:

.cycle-overlay {
    background-color: rgba(0,0,0,.5);
}

And remove opactiy. If you want it 100% black, you can use hex code. If you want a semi transparent background, use rgba instead. The last "a" means alpha value. So, it's just works like opacity.