Opacity is a useful CSS effect that is suitable for both text and media. I mostly use it with social media icons to make hover effect. I have checked the below code in multiple browsers – it works perfectly.

.setopacity {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
  filter: alpha(opacity=50); /* IE 5 to 7 */
  -moz-opacity: 0.5; /* Netscape */
  -khtml-opacity: 0.5; /* Safari 1.x */
  opacity: 0.5; /* Most browsers */
}

Demo – Opacity

A line with No Opacity

A line with 0.5 Opacity