CSS Opacity

When you’re designing a website, you may decide that you want an element on a web page to appear more transparent than other elements. For instance, you may be designing a web page with a number of images that you want to appear somewhat transparent.

That’s where the CSS opacity property comes in. The CSS opacity property is used to specify the transparency of a web element.

This tutorial will discuss, with reference to examples, how to use the opacity property to make elements transparent on a web page. By the end of reading this tutorial, you’ll be an expert at working with the opacity property in CSS.

CSS Opacity Property

The CSS opacity property makes elements see-through, or transparent.

The value of the opacity property ranges between 0 and 1. The lower the value of the opacity property, the more transparent an element will appear. So, a value of 0 would make an element fully opaque or fully transparent, and a value of 1 would make an element appear as normal.

Here’s the syntax for the CSS opacity property:

img { opacity: 0.5; }

The above example would set the opacity of any img elements on a web page to be equal to 0.5. This means all images would appear 50% more transparent than they would by default.

The opacity property is applied to both a parent element and any child elements the parent contains. This means that if you apply the opacity property to a box that includes text, both the box and text will be made opaque.

Now that we’ve discussed the syntax of the opacity property, we can walk through a few examples of how to use this property in action.

Creating a Transparent Image

Suppose you are designing a website where you want an image to appear transparent. You could accomplish this goal using the opacity CSS property.

Here’s an example of opacity being used to set an image to 0.7 opacity (which makes the image 70% opaque):

img {
	opacity: 0.7;
}

Our code returns:

On the left side, we have created an image with no opacity value set. This means the image is not transparent. On the right side, we have created an image and set its opacity value to 0.7. As a result, the image on the right side is more transparent than the one on the left.

Trigger Opacity on Hover

When you’re working with the opacity property, you may decide that you want an image to appear more or less opaque when the user hovers over the image.

The :hover CSS selector can be used in combination with the opacity level attribute to change the level of transparency an image has when a user hovers over the image.

Suppose we wanted our images to be 50% transparent (or, in other words, have a 0.5 opacity value) by default. We also want to set the value of opacity to 1 when the user hovers over our image. We could accomplish this task using the following code:

.img {
  opacity: 0.5;
}

.img:hover {
  opacity: 1;
}

Here’s the result of our code:

On the left, you can see an example of our image when the user is hovering over the element with their cursor. On the right, you can see how our image appears when the user is not hovering over the element with their cursor.

By default, our image is 50% transparent, but when a user hovers over the image, the opacity of our image is set to 1 and our image becomes fully visible.

Transparent Boxes

The opacity element can also be used to make a box transparent in CSS.

When you use the opacity property to make an element transparent, every element within that element will also share the opacity you specify.

Suppose we have two <div> elements, which create boxes on our web page. We want one of these <div> elements to appear as normal, and the other to appear 50% transparent. We could use the following code to accomplish this task:

.div1 {
background-color: #B5651D;
	opacity: 0.5;
 	text-align: center;
  	padding: 20px;
  	color: black;
}

Our code returns:

In this example, we have created two boxes. The top box has the same styles as the bottom box, but has no opacity value specified. The bottom box has an opacity value of 0.5 set, which means the box appears 50% transparent.

As you can see, the text in our bottom box is also more opaque. This is because all elements inside the <div> box inherit the transparency value we have specified.

RGBA Color Transparency

In our examples above, we have used the opacity property to make elements more and less opaque. However, there is another approach you can use to make an element transparent: set the background color of an element using RGBA color values.

When you’re working with colors, you’ll often use RGB to specify a color value. In addition to using RGB, you can also specify an alpha value (RGBA), which sets the opacity of the color you have specified.

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

Find Your Bootcamp Match

This approach is useful because it allows you to set the opacity for the background color of an element, which will not be applied to any elements within the element which is made more transparent. This is unlike the opacity attribute, which is applied to all elements within the element where an opacity value is specified.

Let’s take our brown box example from earlier. If we wanted to make our box 70% transparent, but not the text inside the box, we could use the following code:

.div1 {
 	text-align: center;
  	padding: 20px;
  	color: black;
	background: rgba(181, 101, 29, 0.3);
}

Our code returns:

The opacity value we specify in our code is 0.3. This is because the lower the opacity, the more transparent an element appears, and 0.3 opacity means that the element will be 70% transparent. We have also set the color of our text to be black in this example.

The top box is an example of our <div> without any opacity. The bottom box uses an rgba() value to set its opacity to 0.3. As you can see, our bottom box is significantly more transparent than the top box.

However, the contents of our box—the text This is a box.—is not any more transparent. This is because we set the background color of the box to be transparent.

Conclusion

The CSS opacity property is used to set the transparency of an element on a web page.

This tutorial discussed, with reference to examples, how to use the opacity attribute to change the opacity of an image and a box. This tutorial also explored how RGBA colors can be used to create a transparent effect in CSS. Now you’re equipped with the knowledge you need to start working with the opacity attribute like a pro!