STEP 1: Creating elements

Create a Tabs element from the drop down on your Start Page. In each tab you want to use an Image Element and a Top Story element. In the Image you should upload an image that is wide enough to fill the column you want to place the Tabs element in. For example: If you have the Tabs element in the Upper Left slot on a two column design (as shown in the image to the right), the Image you upload should be at least 620 pixels wide. We will set a width on the image using CSS, so the image size does not have to be exact, but it should not be less than the width of your column, or your image will look pixelated.

In a Teaser element, paste your article in, select "Top Story", and select the "hide image" check box at the bottom of the element.

Save your new Tabs element.

STEP 2: Upload CSS

Insert the following CSS into your local stylesheet, or create a separate local CSS document to house the new code. The latter is a good option should you ever want to remove the opacity treatment, you can just delete the custom stylesheet without having to hunt through your local CSS document. Either way, make sure to label your CSS well.

/* Opacity Overlay Tabs Treatment */
#content .yui-skin-sam {position: relative;}
#content .yui-skin-sam .singleImage img {width: 620px;margin: 1em 1em .7em;}
#content .yui-skin-sam .teaser {position: absolute;bottom: 27px; left: 12px;width: 598px;padding: 1em;background: #000;opacity: .70; -moz-opacity: .70; filter:alpha(opacity=70);}
#content .yui-skin-sam .topStory .gutter {padding: 0;}
#content .yui-skin-sam .topStory h3 {font-weight: normal;font-size: 2.3em;}
#content .yui-skin-sam .topStory h3 a, #content .yui-skin-sam .topStory p, #content .yui-skin-sam .topStory a {color: #fff;}

Notes: The CSS above is sample code for a Tabs element in the Upper Left column, on a Two Column layout. If you have a Three Column Layout, are using the Tabs element in a Splitter, in the Right Column, etc. you will need to adjust the widths on .singeImage img, and .teaser.

I would also recommend specifying the content slot you are placing the Tabs element in, via the CSS. For example: If you plan on having the Tabs element in the Upper Left slot, you should use #upperLeft instead of #content or #wrapper before your CSS definitions. This allows for more flexiblity in your design because you can give the Top Story element inside the Tabs element a different treatment in the Lower Left Slot, or in your Right Column.

If you want to use the Opacity Ovelay Tabs element in multiple places on your site (i.e. in the right column, full width in the main content area, in a Splitter element) you will need to set the widths for each of those instances. You can do this very easily by specifying the elemnent's ancestors in the CSS declaration. For example, if you wanted to also use the Opacity Overlay treatment on your tab box when it's in a splitter you would copy these lines of code: 

#wrapper .yui-skin-sam .singleImage img {width: 620px;margin: 1em 1em .7em;}
#content .yui-skin-sam .teaser {position: absolute;bottom: 27px; left: 12px;width: 598px;padding: 1em;background: #000;opacity: .70; -moz-opacity: .70; filter:alpha(opacity=70);}

Take out the unnecessary CSS declarations, and add in .splitter in front of the tab element's class:

#wrapper .splitter .yui-skin-sam .singleImage img {width: 310px;}
#content .splitter .yui-skin-sam .teaser {width: 299px;}

You can use those specifications to customize the width of the Opacity Overlay Tabs in any distinct placement on your site.

STEP 3: Customize

Everything in this code is customizable, so please use it as a jummping-off point. You can easily customize the color of the opacity layer to match your site's design. In the above CSS you would modify the background color on #content .yui-skin-sam .teaser, and also make sure to modify the link color in the last line of CSS above.

STEP 4: Check your work

Load your site and make sure the widths you have set in the CSS work with your content layout on your site.

ALTERNATE METHOD: Opacity overlay using only Tabs and Top Story elements

The biggest benefit to the method outlined above is that you can specify a differnt image for your tab box, than is actually on the article page. However, if you're looking for a process with one less step, then this is for you. There are just a few alterations you have to make to the steps above to achieve the same effect using only the tab box, and a teaser marked "Top Story".

STEP 1: Creating Elements

For this method you will need to create a Tabs Element, and in each slot create a Teaser element with the "top story" box checked. Make sure that there is an image attached to the article you are pasting into the teaser - the image should be at least 640 pixels wide.

STEP 2: Upload CSS

Following the same guidelines listed in Step 2 above, paste the following CSS into your stylesheet:

/* opacity overlay styles */
#content .yui-skin-sam .topStory {position: relative;}
#content .yui-skin-sam .topStory img {width: 643px;margin: 0;}
#content .yui-skin-sam .textWrap {position: absolute;bottom: 0px; left: 0px;width: 623px;padding: 1em;background: #000;opacity: .70; -moz-opacity: .70; filter:alpha(opacity=70);}
#content .yui-skin-sam .topStory .gutter {padding: 0;}
#content .yui-skin-sam .topStory h3 {font-weight: normal;font-size: 2.3em;}
#content .yui-skin-sam .topStory h3 a, #content .yui-skin-sam .topStory p, #content .yui-skin-sam .topStory a {color: #fff;}