CSS Transparency

Modern browsers today supports this cool feature of CSS. Transparent elements on the web add highlights and hide unnecessary stuffs on the web. We can also use this on hover states of our navigation.

For a normal situation, Internet Explorer won’t allow us to use this amazing CSS transparency easily.

Transparent CSS for IE

.opacity{
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
}

Opacity for Modern Browsers

.opacity {
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}

As a result, we can have the best cross browser compatibility using the CSS code below:

Complete Opacity CSS Code

.opacity {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
 -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}

Note: The opacity on the sample code above is set to 50%. You can change it freely.