Skip navigation

CSS

CSS Rules

Highlight images on mouse over using Opacity

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