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

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.

The following example sets the opacity for an image:

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.

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:

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.

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.

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.

• 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.

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.