Transparent Captions with Opaque Text

The object of this CSS tutorial is to create a semi-transparent or translucent background in a caption box positioned over an image or other element. It's an attractive website design technique that is simple in concept, but has been difficult to achieve before CSS 3 when the only choice was a background PNG image or the opacity property. One of the main obstacles has long been the way in which browsers actually draw elements when you alter the opacity with CSS. This tutorial shows how you can make a transparent caption with fully opaque text for your images in static webpage elements as well as in dynamic displays such as slideshows.


Caption with Opacity Bleed

Opacity With Z-Index Layers Problem

If you set the opacity of any element to less than 1 to get some degree of transparency, any element that overlays it using the z-index setting is drawn with that same opacity setting. In this situation, that means that any text that you position over your caption's nicely translucent background is drawn with that same opacity so instead of being bright and clear, it's often muddy and visually disappointing - as seen in the example here. We start with a containing div to give our image a positioned parent element. The image is contained in a div set to position:absolute with a z-index setting of 10. A div to hold the caption is also set to position:absolute and bottom:0, with an appropriate height setting and the background color set to a sort of maroon using rgb(100, 0, 0). The div is also set to opacity:.6 to allow the underlying image to shine through. However, as you can see, the text is also drawn with the same opacity and looks terrible.



Opaque Text Caption

The key to avoiding the opacity bleed issue is use the CSS3 color scheme rgba() to set the background color, because rgba() includes an alpha channel parameter to add a transparency/opacity setting to the specified color (which is expressed as a red/green/blue triplet that consists of three numbers or percentages). For the rgba scheme, a forth parameter is added that sets the opacity of the element. Just like the CSS opacity property, the alpha channel setting accepts values from 0 (completely transparent) to 1 (completely opaque). As you can see in the examples on the left, the colored background allows the underlying image to show through, but the caption text is rendered at full opacity which makes it bright and clear and easy to read. The CSS I used is as follows:



 .rdCaptionBox { margin:0 auto; padding:0; position:relative; top:0; left:0;
                 z-index:10; width:384px; height:256px; }
 .rdCaption { position:absolute; bottom:0; left:0; padding:4px; width:376px; height:26px;
              background-color:rgba(100, 0, 0, .6); z-index:11; }
 .rdCaptionText { margin:0; padding:0; z-index:11; text-align:center; opacity:1;
                  font-family:Georgia,serif; font-style:italic; font-size:1.6em;
                  font-weight:bold; color:white; }

It starts with a wrapper DIV, class "rdCaptionBox", which provides a foundation and the font settings. Next comes the IMG tag, followed by another DIV, class "rdCaption" which has position:absolute and a z-index to position it over the image and the critical background-color setting that uses RGBa to provide transparency. All of the required CSS is actually in the source for this page, so you can find it easily.

Unfortunately, Internet Explorer only started to support rgba colors with version 9.0 which, as of this writing, is only used by a modest (albeit, growing) percentage of current Internet Explorer users. So it can be a good idea to add an 'opacity' setting to the element using an !--[if lt IE 9] conditional comment tag to hold this CSS setting for older versions of Internet Explorer to allow for some transparency without affecting the display in other browsers.

Again, the actual CSS and HTML used to create this effect is very simple. You create a containing wrapper DIV with its position property set to relative with the top and left properties set as desired (usually 0) and a base z-index setting. Inside that DIV you insert the element you want for the base display (presumably just an image), as well as a class "rdCaption" DIV to hold the caption text. The rdCaption DIV has it's position set to absolute, again with the desired coordiate settings as well as a z-index set higher than the base setting used for the parent containing DIV. The crucial setting, however, is the background-color which is set using the RGBa() color scheme.


Text-Shadow Outlined Caption

This example more clearly demonstrates the translucent background with opaque text. You'll also note the shadow effect on the text. The shadow helps add some depth and solidity to the text. Internet Explorer historically produced text shadows with filters, but they don't always produce a pleasing result. It's another case where you have to choose how to approach cross-browser compatibility in your design. While HTML5 and CSS3 provide exciting new capabilities, web designers must always contend with the fact that many users are stuck with older versions of browsers - especially those who access the Internet at work or using an employer-provided computer. At this writing, according to Statcounter, roughly 10% of Internet users still rely on version 6, 7, or 8 of Microsoft Internet Explorer - none of which have any significant support for CSS Level 3. Those users should be accounted for when you design a mass-market website at least through the end of 2014 when those numbers should fall to insignificance. In any case, I have included special style settings for old versions of IE as well as IE9+ so that all versions get the best possible results.

Internet Explorer: There have been several groups and individuals who have been working on software that will add support for many CSS Level 3 features to older versions of Microsoft Internet Explorer. I've had the best luck with the software from PIE - Progressive Internet Explorer. If you absolutely must support older versions of Internet Explorer, I encourage you to try the PIE package.


Gradient Background Caption

CSS Level 3 also brings the capability of using gradients for background images. Here I've just replaced the evenly translucent background with one that gradually fades to full transparency. It's a bit complicated to provide backward compatibility with older versions of Internet Explorer for this effect, thanks to Microsoft's unique graphics filters that are required to produce gradients, and you may have trouble getting opaque text. You just need to remember the "cascading" part of Cascading Style Sheets. See my demonstration of Gradients and Transitions for more examples of some new CSS 3 properties to improve your website design.

This effect is often accomplished by using a PNG background image, with a gradient alpha channel setting. Since Internet Explorer has supported PNG since version 7, such a background graphic does make compatibility automatic. But I have trouble using most graphics programs for such things, so I wrote a transparent background creator in PHP that makes it easy. Try it.



 .rdCaptionGrad { position:absolute; top:0px; left:0; padding:4px;
     width:376px; height:32px; color:white; z-index:11;
     background-image:-ms-linear-gradient(to bottom, rgba(100, 0, 0, 1) 10%, rgba(100, 0, 0, .8) 40%,
       rgba(100, 0, 0, .5) 70%, rgba(100, 0, 0, 0) 96%);
     background-image:linear-gradient(to bottom, rgba(100, 0, 0, 1) 10%, rgba(100, 0, 0, .8) 40%,
       rgba(100, 0, 0, .5) 70%, rgba(100, 0, 0, 0) 96%);
   }

This page was last modified on December 09, 2015


Copyright © 2005-2017 by Richard L. Trethewey - Rainbo Design Minneapolis. It's not that I think this is such an earth-shatteringly great presentation, but if you want to copy it, I'd appreciate it if you would ask for permission. I've been working with computers for over 30 years now, and one phrase keeps popping into my head - "I hate it when it's right!" And laptops and smartphones are no better.

Looking for more website design information? See my Sitemap!


  Share This Page!  
Still Have Questions? 
Talk To Me! Click Here!