CSS Opacity

In this tutorial we will learn about CSS opacity.

opacity

We use the opacity property to control the opacity of an element. This property can take value between 0 to 1. So, 0 means completely transparent. 1 means 100% opaque. And similarly 0.5 means 50% transparent.

The opacity value of an element also gets inherited by it child elements.

In the following example we have set the opacity of the divs to different values.

/**
 * common for the divs
 */
div {
	background-color : #0f0;
	color : #333;
	padding : 20px 5px;
	text-align : center;
	float : left;
	margin-left : 20px;
	width : 100px;
	height : 50px;
	opacity : 1;
}

/**
 * for respective opacity
 */
div#box-1 {
	opacity : 1;
}

div#box-2 {
	opacity : 0.7;
}

div#box-3 {
	opacity : 0.5;
}

div#box-4 {
	opacity : 0.2;
}

div#box-5 {
	opacity : 0;
}

opacity using rgba

We can also set the opacity of an element using the background property and setting its vale to rgba().

In this case the opacity value applied to an element is not inherited by its child elements.

The rgba() takes 4 comma separated values and the fourth value is for the opacity.

Click here for CSS Color tutorial and read about RGBA.

In the following example we have set the opacity of the divs using rgba value.

/**
 * common for the divs
 */
div {
	color : #333;
	padding : 20px 5px;
	text-align : center;
	float : left;
	margin-left : 20px;
	width : 100px;
	height : 50px;
	opacity : 1;
}

/**
 * for respective opacity
 */
div#box-1 {
	background : rgba(0, 255, 0, 1);
}

div#box-2 {
	background : rgba(0, 255, 0, 0.7);
}

div#box-3 {
	background : rgba(0, 255, 0, 0.5);
}

div#box-4 {
	background : rgba(0, 255, 0, 0.2);
}

div#box-5 {
	background : rgba(0, 255, 0, 0);
}

filter for IE

For IE8 and earlier versions, we use the filter property and sets its value to alpha(opacity=X). The variable X takes a value from 0 to 100. Where 100 means completely opaque and 0 means completely transparent.

In the following example we have set the opacity and filter (for IE 8 or earlier).

div {
	opacity : 0.5;
	filter : alpha(opacity=50);

	color : #333;
	background-color : #0f0;
	padding : 20px 5px;
	text-align : center;
	margin-left : 20px;
}

opacity and hover

We can also change opacity of an element when mouse hovers on top of it using :hover

In the following example when the mouse hovers on top of the div its opacity changes to 50%.

div {
	color : #333;
	background-color : #0f0;
	padding : 20px 5px;
	text-align : center;
	margin-left : 20px;
}

div:hover {
	opacity : 0.5;
	filter : alpha(opacity=50);
}

In the following example when the mouse hovers on top of the image its opacity changes to 10%.

img:hover {
	opacity : 0.1;
	filter : alpha(opacity=10);
}