AtoZ CSS Quick Tip: Control Element Visibility with Opacity

This article is a part of our AtoZ CSS Series. You can find other entries to the series here.
You can view the full transcript and screencast for opacity here.

Welcome to our AtoZ CSS series! In this series, I’ll be exploring different CSS values (and properties) each beginning with a different letter of the alphabet. We know that sometimes screencasts are just not enough, so in this article, we’ve added a new quick tip about opacity for you.

O is for opacity

We can use opacity to control the visibility of elements on the page – anything from completely transparent to completely opaque as discussed in the original screencast video.

Here are a couple of tips when using opacity to ensure the right parts of the element are semi-transparent and to demonstrate how we can create fading effects without relying on JavaScript effects libraries.

Tip 1: opacity applies to the whole element

When setting opacity on an element, the whole element, including its children are made semi-transparent. The opacity is not inherited by the children so unfortunately you can’t set opacity: 1 on them to make them fully opaque again.

If you want to have the background of an element semi-transparent but want the child elements (eg: text or images) to be opaque, use a semi-transparent background instead of using opacity.

.module {
  background: rgba(255,255,255,0.5); /* semi-trans white */
}

Tip 2: opacity affects stacking context

When setting opactiy to a value less than 1 the element is placed on a new layer so the background can be shown beneath the semi-transparent element. This is similar to how z-index works and, just like z-index, using opacity creates a new stacking context.

Tip 3: Create fade effects without jQuery

I’ll preface this with a disclaimer: I like jQuery and use it a lot – on almost every project I work on. What I’m talking about here is not abandoning jQuery (although you don’t really need it in this case) but using native CSS functionality instead of leaning on JS for effects.

We can create fade in and fade out effects quite simply by combining opacity, transition and possibly some JS class switching.

To outline the scenario, imagine a situation where clicking a button fades in a modal window to display some additional content. This modal content could be hidden when the page loads and then displayed using jQuery’s fadeIn() method.

$('.show-modal-button').on('click',function(e) {
  e.preventDefault();
  $('.modal').fadeIn();
});

This will use JavaScript to animate the element from display:none to display:block by injecting inline styles.

I tend to avoid having inline styles injected unnecessarily and we can actually perform the same effect by setting up “state” classes in our CSS – one for the visible state and one for the invisible state – apply a transition to the element we want to fade and then toggle the different states using simple class switching. You could use a CSS pseudo-state like :hover or :focus if you wanted to keep the effect purely CSS.

First we set up the states in the CSS. I use a naming convention prefix of is- to demonstrate that the class is a state triggered by JS.

.modal {
  /* other styles for modal */
  transition: opacity 1s ease;
}
.modal.is-visible {
  opacity: 1;
}
.modal.is-hidden {
  opacity: 0;
}

We can now toggle the states by dynamically adding or removing classes in JS (assuming that you start with the class is-hidden in the HTML):

$('.show-modal-button').on('click',function(e) {
  // turn off the is-hidden class and turn on the is-visible class
  $('.modal').toggleClass('is-hidden is-visible');
});

So there you have it, 3 quick tips about the opacity property.

The one I’d encourage you to use the most is leveraging CSS for your effects over using JavaScript. I find I have much more control of the animations and transitions, and you can pull off some pretty fancy effects without huge lines of jQuery animation callbacks.