flag of the United Kingdom

Translucent Tables

I recently had to create a webpage that presented me with a little problem.

The client wished to have a series of images on the page with text in a translucent box superimposed on top of them.

This isn't difficult to achieve in itself, Photoshop handles transparency very well and I could have created such images quite quickly and easily with it. The client also wanted the page to contain one main image that would be randomly selected from a series of images when the page was presented. Again, this wasn't a big problem, I wrote a small Perl script that did just that.

The problem was that this main image also had to have a translucent text container superimposed upon it and that text was also to be randomly selected. Unfortunately, there were two and a half thousand text entities and twenty-two images. So it was totally impractical to manually create the 55,000 images that would be required to statically service this request. I needed to be able to create these images on-the-fly.

Another Perl script presented me with the random text snippets I required, but I still need to overlay the text and a translucent table cell onto each image as necessary. It is not possible to do this with HTML, but I discovered that it can be done with CSS, as the example below illustrates.

The road to nowhere...
Translucent Box

So how did I achieve this? Take a look at the code below:

<img title="The road to nowhere..." height="333" alt="The road to nowhere..." src="/assets/system.image_vault/846.jpg" width="404" style="border: 1px solid #000000;" />
<div style="margin-top: -75px;">
<div style="background: #ffffff; filter: progid:dximagetransform.microsoft.alpha(opacity=40); width: 300px; height: 48px; -moz-opacity: 0.40;"></div>
<div style="margin-top: -38px; font-size: 16pt; color: #ffffff; font-family: verdana, arial, helvetica, sans-serif; text-align: center;">Translucent Box</div>

The only trick the <img ...> tag contains is the style="border: #000000 1px solid;", which draws a black, 1-pixel wide border around the perimeter of the image.

The first <div ...> is a container for the box and text. We tell the browser to render it 75 pixels higher than it otherwise would (the browser wants to render it below the image).

The second <div ...> contains the trickery:
filter: progid:dximagetransform.microsoft.alpha(opacity=40); to create the translucency in Microsoft browsers;
-moz-opacity: 0.40; for Mozilla.

That's all there is to it. I am pleased with the effect and, more importantly, the client got what he wanted.

NOTE: This effect is not visible in all browsers, but does render correctly in Microsoft Internet Explorer 6+ and Mozilla Firebird 0.6.1+.

UPDATE (9-Feb-2004): Mozilla Firebird is now Mozilla Firefox!

You can comment on this, or read what others have written (8 comments).