How to apply CSS opacity in IE7 and IE8 browsers

Apply opacity in IE7: The opacity level of the HTML element is defined by using the CSS opacity property. We can set opacity like 0.5, which the element opacity as 50%. This works fine with all modern browsers, but not in IE7. Yes IE7 is a very outdated browser, but still, some user used their application on IE7. So here in this article, we learn how to set opacity in MS IE7. 

Recently I encounter one issue, where I have to set the opacity of an input textbox and a div tag. So I tried by setting CSS property opacity: 0.5, and it works for all modern browsers, but not in the MS IE7 browser. After some research, I figured out that the direct opacity property not working in the old browser .ie IE7.

To make it work in IE7 we have to write extra css, which as written below:

.contentCard {
  filter: alpha(opacity=50);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; /*For IE8 */
  zoom: 1;  /* for IE7 */
  opacity: 0.5;  /* Default syntax for modern browser */
}

Here we use the filter and -ms-filter property, which defines the visual effect of the element.  By setting opacity=50 we make our div 50% opacity in MS IE7.

Conclusion: Using the filter property we can set the opacity of the HTML element in IE7.

Other Reference:

• CSS Filter