Transparent .PNG Image Frame Using CSS Only

Recently while working on a Drupal Gardens site, I wanted to know how hard it would be to do a transparent .png overlay on top of the slideshow module. Just something to give it a softer, framed look. As I searched for ways to do this, I came across several javascript and jquery solutions, but I wondered if there was a simpler way, using CSS only. Using only the developer tools on my browser and the "Advanced" tab in the Drupal Gardens Appearance editor, I starting working some magic, and it turned out to be easier than I thought.

To have a transparent image "frame" on top of your slideshow, the frame must be the background image of something that comes after your images in the HTML output. The easiest thing to use is the "buttons" div, that immediately follows the slideshow, and controls which image you are viewing. Be sure that your slideshow settings are using "buttons" or else you'll need to use the css class "controls".

The HTML looks like this:

<div class="rotating-banner jCycleActivated-processed" id="rotating-banner-2" style="max-width: 700px;">
    <div class="rb-slides" > ...</div>
    <div class="buttons controls" > ...</div>
</div>

My transparent frame overlay is 721 x 357, so I added some CSS to make my image the background of the "buttons" div, and then bumped it up using relative positioning so that it is now directly on top of my slideshow. Then I added a negative margin to the bottom, so that the rest of the content on the page is moved back up into it's normal position. Your heights and widths will vary based on the size of your slideshow and the size of the transparent image you are using, but feel free to use the css below to get you started!