Opacity without Scripting


First of all a quick explanation. Opacity can be described as the opposite of transparency. What I mean by this is, you can think of 20% opacity being the same as 80% transparency. An unaltered image has an opacity of 1.0 or is fully opaque.

An opacity hover effect can have a nice visual impact for your images. It is also an alternative than the traditional method of having 2 different images and having to use image pre-load techniques.

The below CSS3 method works in current versions of IE, Firefox and Opera. There is only a single image used each time (reduces page load times) and minimal HTML and CSS required to achieve the result. I have also added some padding and a background color for effect.

The -moz-opacity is included strictly for backwards compatibility with older versions of Mozilla and not required for current versions of Firefox.

25% Opacity

50% Opacity

75% Opacity

90% Opacity