CSS cross browser opacity example


While I am working on a project one of the requirement is that make the site look and feel as much compatible with Internet Explorer 7.

IE7 Yeah! Well nothing against the browser because its Free and still lot of people use it. I myself am not fan of IE7 but IE9 and 10 are on right track I guess. I am Chrome lover.

Anyway this post is not about the browser comparison but rather I just wanted to highlight how we can make the element opacity to work in majority of the browsers.

Alright so lets check it out.

For the example I worked on below is the mark up used

The Markup


I wanted to display an overlay on my image with text “Copyright © jaspreetchahal.org

lets check the CSS for the above

[geshi lang=”css” nums=”1″ target=”_self” ]

All the major browsers now support property opacity but this was not the case some time back. But still if you are looking to make your website to work on many old browsers that some people still use then making use of browser specific CSS properties is the right thing to do as we did with the opacity property above

Lets check the result of the above styles


Demo can be viewed by click the link below.


I hope that this will help you in one way or another





Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.