CSS3 opacity sets the opaqueness of the element. Opacity is the opposite of transparency. The value of opacity is a floating value, between 0 to 1.
0 defines the element as fully transparent( same like visibility:hidden), whereas an opacity value 1 means the element is fully opaque or zero transparency.

Change Opacity

css3 opacity

Opacity Values

Possible values of opacity

Opacity values
1 Default opacity of all elements.
0 Opacity 0 shows element as fully transparent. Same like (visibility:hidden)
0.5 Opacity 0.5 shows element as half transparent. Thus we can see background colors and images.

How to use opacity

Opacity values are always floating values, minimum value is 0, and maximum value is 1. We prefer opacity value till one place.

    <img class="img-1" src="images/logo.png" alt=""> 
    <img class="img-2" src="images/logo.png" alt=""> 
    <img class="img-3" src="images/logo.png" alt=""> 
    <img class="img-4" src="images/logo.png" alt="">          
tech altum


tech altum


tech altum


tech altum


Opacity in IE8 and below

Internet Explorer 8 and below doesn't support opacity. But using css filter property, opacity can works even on old IE versions like IE 8, 7 , 6 and 5.

Opacity in Internet Explorer IE8 and below

    opacity:0.5;                      /*latest Browsers*/
    filter: alpha(opacity=50)         /*IE 5-7*/
    -ms-filter: alpha(opacity=50)     /*IE 8*/

Note: opacity is supported in html5 based browsers only. IE 8 and below doesn't support opacity. For old IE versions, use filter:alpha(opacity=n), where n is a number between 0-100.