How to Create Transparent/Faded Image or Div

Its been quite a wish for a lot to fade or make an image or div transparent just with the CSS code, and it was quite just a thought, which is actually now possible.

Though its not a standard CSS code, but W3C CSS3 recommended one, which do work in most of the major new browsers.

The CSS code,

opacity: 0.7
filter: alpha(opacity=70); /*for Internet Explorer*/
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /*for IE8 and IE9*/
-moz-opacity: 0.7; /*for Mozilla Firefox*/
-khtml-opacity: 0.7; /*for Safari Browser*/

Can be used for images or div
Also can be customized to be used during mouse over actions!

You can Download this test file here, and see how it works practically.

Got any issues or conflicts, just leave a comment, and lets sort it out.

Leave a Reply