It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

Set the CSS Opacity for HTML Elements Such as Images and Text Boxes

Reading time 2 min
Published Nov 8, 2016
Updated Oct 14, 2019

TL;DR – CSS opacity property determines the opacity (transparency) of elements such as images or texts.

Setting Opacity of Images

CSS opacity makes elements see-through. The value of the CSS opacity property ranges between 0.0 (0%) - 1.0 (100%) The lower the value of opacity, the higher the transparency.

CSS Opacityopacity 0.2
CSS Opacityopacity 0.5
CSS Opacityopacity 1 (default)

The following example sets the opacity for an image:

Example
img {
   opacity: 0.3;
   filter: alpha(opacity=30); /* For Internet Explorer 8 and earlier */
}

Opacity on Hover

You can set the opacity of images according to their states by combining the opacity CSS property and the :hover selector.

CSS OpacityCSS OpacityCSS Opacity

In the example, you see a partially transparent image. Once you move the mouse cursor over images, the images get the highest value of opacity:

Example
img {
   opacity: 0.3;
   filter: alpha(opacity=30); /* This is for IE8 and other earlier browsers */
}

img:hover {
   opacity: 1.0;
   filter: alpha(opacity=100); /* This is for IE8 and other earlier browsers */
}

Setting Transparent Boxes

You can set the CSS transparent background for boxes by adding the opacity property to multiple <div> elements.

opacity 1 (default)

opacity 0.8

opacity 0.4

opacity 0.2

Example
div {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

Tip: you should notice that texts inside boxes take the opacity of the CSS transparent background. The RGBA function allows you to keep the text opacity.

Setting Opacity With RGBA

If you wish to keep the text opacity and only set the CSS transparency for backgrounds, we recommend using the RGBA function. It lets you indicate opacity specifically for the background.

100% opacity

80% opacity

40% opacity

20% opacity

Example
div {
    background: rgb(136, 66, 213, 0.4) /* Purple background with 40% opacity */
}

Setting Transparent Box in a Background

It is possible to set solid backgrounds and insert CSS transparent boxes with text in them.

This transparent box contains some text

 

  • The example defines a <div> element with the class="background" that has a background image, and a border.
  • Then, example creates another <div> element with class="transparentbox". This <div> that has a background color and a border, and is placed within the first <div>.
  • This nested <div> is made transparent and some text is added within the <p> element inside it.
Example

div.transparentbox {
   opacity: 0.6;
   margin: 30px;
   border: 1px solid black;
   background-color: #ffffff;
   filter: alpha(opacity=60); /* This is for IE8 and other earlier browsers */
}

div.transparentbox p {
   margin: 5%;
   color: #000000;
   font-weight: bold;
}

div.background {
   border: 2px solid black;
   background: url(flowers.jpg) repeat;
}

CSS Opacity: Useful Tips

  • You need to include filter: alpha(opacity=x); to make sure that opacity property works in Internet Explorer. The x represents percentages.
  • opacity in CSS can be replaced with visibility: hidden; when you need to hide elements completely.