Sometimes you might want to blur (reduce the opacity) an image on default and bring it back to being opaque on mouse over. You can use this effect to keep the users focus on your content rather than those links bar on the top of the page: for e.g. you can make your full menu bar with links less opaque or more transparent by default and highlight them on mouse over.
So how do we acheive this? Very simple the answer to this is to use the “opacity” property.

Opacity property can have the following values: 0.0 to 1.0 any values outside this range will be clamped into this.

Opacity: 1.0 means that the element is 100% Opaque or in other words 0% transparent.
Opacity: 0.0 means that the element is 100% transparent or in other words 0% opaque.

according to W3C this is how opacity should be defined opacity: 0.5

But Mozilla and IE had their own ways of implementing this

IE wants this for opacity to work filter:alpha(opacity=50)

and Mozilla wanted this -moz-opacity: 0.5

but newer versions of Mozilla doesn’t require this (I haven’t tested this but you can check it yourself by applying this style)

opacity.css

body{
font-family: “Trebuchet MS”,Trebuchet,Verdana,Sans-Serif;
background-color: #FFF;
color: #eee;
}

a.myopacity img{
border: none;
padding: 3px;
filter:alpha(opacity=65);
-moz-opacity: 0.65;
opacity: 0.65;
}

a.myopacity:hover img{
border: 1px dotted #000;
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}

The result

or you can see this here in action

http://www.praveenc.com/gallery.html

and by the way I forgot to mention that opacity can be applied to all elements.

Means you can apply this to text blocks, div’s, images, hyperlinks..or whatever you like. So go ahead and freak out.

Good day people!!!