Opacity and RGBA

Click to see Paper Pastries' Otto demonstrate rgba vs opacity.

Isn't Otto cute? Otto is Margaret's cat --- Margaret of Paper Pastries. I've grown so fond of him and Milchy's uninhibited displays of cat romance on Instagram, begging the question... why don't I have a cat? Cat's are so cool! Oh yes... Taco needs convincing. 

I want to thank Margaret for letting me borrow Otto's photo for today's tutorial. I totally appreciate it. Besides, I can't think of a better photo to keep you guys awake and attentive while I pull back the curtains and reveal today's topic of discussion: CSS opacity and RGBA. Muwaahhhaahahaha. But for reals, I hope you guys aren't too disappointed. CSS opacity is cool, yo. And so is its relative, RGBA... besides, more Otto pics below.


No. 1

As I've mentioned before, changing an element's opacity on a mouseover is a really easy way to give visual indication that certain images are clickable links. All we have to do is add one pseudo class rule and BAM! We've got a cool hover effect.  But what if your html structure involves more than just an image? What if you have  a layer of text links in front of the image? In other words, the image block also contains the text link. If you try this, you'll see that applying  opacity to an element containing both the image and the text results in a decreased opacity for all elements (the element and its children). But what if you want the text to stay 100% opaque? Before we get into our next experiment, let's check out RGBA. Here's the syntax:


Examples:

/* rgb color = white */
rgb(255,255,255);

/* rgb color = black */
rgb(0,0,0);

/* rgba color = black with .8 opacity */
rgba(0,0,0,.8)

Let's play with RGBA and start off by using it only as a tint (for now). For experiment #2, we're going to stick to opacity when we hover over the image. 


No. 2

Let's add a child div within the parent container and give it a semi transparent tint. And then, on  a hover, we can change the opacity as we learned here. What happens? Since opacity changes the opacity for itself (the tint) and its children (the text link), we encounter the same problem --- the text becomes nearly invisible on a mouseover since it inherits the opacity value from its parent (tint).

Instead of using opacity on a hover (which affects the element itself and its descendants), why not use RGBA to specify the opacity on a color (which will only apply to itself)? Let's try this in experiment No. 2:


No. 3

Let's tweak one line from No. 2. Let's go to the tint class' hover rule and change the background color's value from opacity: .1 to rgba(255,255,255,.1). Save it and then let's refresh the page and see what happens... it works! The rgba property only changed the opacity for the background-color property, keeping our text readable at 100% opacity. 

Which is better? Opacity or rgba?

Neither, really. There might be a situation where No. 1 is the best design solution and at other times, the best way to go may be through No. 3 -- it all the depends on context and what you're trying to achieve. I hope this post was useful and that you learned something new today. Thanks again, Margaret & Otto!

It's a goody resource (Read Terms of Use):

Check out demo.html and demo.css to see how the page is set up. Also, read the CSS file for more notes. The tint class has some instructions, too.