Techy? Sometimes. Funny? Often. Relevant? Always.

Transparency is a rising trend in the web design world. With CSS3, RGBa, and transparent PNG support in more browsers, designers have taken full advantage of the unique possibilities available through these techniques while still being able to adhere to web standards. For example: Silverback uses transparency to achieve a parallax with it’s background and this year’s 24 Ways barely has any opaque elements at all!

I wanted to incorporate transparency in a practical way for a product menu I was working on. It needed to feature images of each product (that the client could easily swap out), have a transparent overlay on top of the image , and then display a text link on top of that. I drew a little inspiration from ESPN where they have a headline and description for their main story. You could also use this method in a similar way to feature articles, display images, etc.

We’ll have three basic pieces listed from back to front:
1. Our Image
2: Our Overlay
3. Our Text

Here’s the code I started out with:

Windows

Everything is stuck inside our container div, with the img being the background image for our product. Our “text” div includes both the transparent overlay (“background”) and the name (“title”) of the product.

Here’s the output:

View Live Demo

This achieves the look we want, but a minor usability issue—the user has to be hovering over the overlay area to click our link and navigate to a product page—it would be best for them in this instance to have the entire image clickable. We could just stick our “a href” tag around the “title” div to solve this, but doing so isn’t standards compliant.

Some rearrangement was in order.

Refining

Our new code:

As a result, we needed some new CSS for this to work. We’ll allow our user to click anywhere inside the image area by enclosing everything within the link using the z-index property.

We need to set the dimensions of the container to the image that we’re using as our background:.container {
float: left;
width: 230px;
height: 75px;
}

Next, we have to positions all of our elements inside of the container:.product {
position: absolute;
float:left;
}

As a result of the new HTML we’ll need to move our styles over to the a tag thats covering the entire image and make sure the width is 100% so that no matter how long our product name is, it will stretch across the entire image. The z-index of 3 makes sure that the “a” tag is above the rest of the elements, and the padding bumps the link down into the overlay section:a {
width: 100%;
position: absolute;
text-indent: 10px;
padding-top: 50px;
z-index:3;
}

Here’s where the transparent magic comes in. Firefox and Safari will read the “opacity:0.7;” for transparency and we use “filter:alpha(opacity=70);” to satisfy all IE versions back to 6.0. You can experiment with these settings depending on how transparent/opaque you want your overlay to be. The z-index of 2 makes certain it appears underneath our link that covers the entire image.

Also make sure you width is set to 100% and your height to how high you want your overlay to be:.overlay {
position: absolute;
bottom:0px;
background-color: #fff;
opacity: .7;
width: 100%;
height: 30px;
z-index:2;
}And that’s it! Just copy/paste your code for the amount of items you want to link to and edit accordingly. Of course, feel free to play around with different image sizes, overlay colors, etc. Also, it’s entirely possible that there’s an easier way to accomplish this. If you know of one, feel free to share in the comments. Special thanks to Mike and David who helped with both the original and refined versions of this technique.
View Final Live Demo | Download the Source