Cross Browser Opacity Hack

Below snippets will set the opacity of the elements and its children.

selector {
   // IE 8
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  // IE 5-7 
  filter: alpha(opacity=50);

   // Mozilla 1.6 and older 
  -moz-opacity: 0.5;

  //Safari 1.x 
  -khtml-opacity: 0.5;

  //latest browsers
  opacity: 0.5;
}

selector {

// IE 8

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

// IE 5-7

filter: alpha(opacity=50);

// Mozilla 1.6 and older

-moz-opacity: 0.5;

//Safari 1.x

-khtml-opacity: 0.5;

//latest browsers

opacity: 0.5;

}

I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.

Arjun

I am Arjun from Hyderabad (India). I have been working as a software engineer from last 7+ years, and its my passion to learn new things and implement them as a practice. Aside from work, I likes gardening and spending time with pets.