How to make Opacity Image using CSS 3 ?
Before there was CSS 3, to get a transparent effect on the image in the browser, the web designers using image transparent PNG format.
You can achieve a similar effect by using the opacity property. Now, the opacity property has been around for a while, but our beloved IE has its own properties.
Example css 3 image opacity:
<html>
<head>
<title> Opacity Image using css3</title>
<style type="text/css">
.img_opacity {
opacity: .6; // all modern browsers (this is CSS3)
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE 8
filter: alpha(opacity=60); // IE 5-7
}
</style>
</head>
<body>
<img src="http://localhost/cs3/images/photo6.jpg" width="241" height="228"/>
</body>
</html>
The Result:
In modern browsers like Safari, Google Chrome, Firefox, you simply write CSS code like below:
.img_opacity {
opacity: .6;
}