Is there a better way to do this in CSS ?

Ok heres what I am trying to do: I want an image to turn from not so bright (somewhat greyish) to its original color on a mouseover. Basically I am trying to change an image’s opacity. The problem with the method i am using right now is that It does validate (since I am using moz-opacity and microsoft.apha) and works in IE and FF only. So is there a better way to do this (hopefully using just one image) so that the CSS will validate ? Also could you point me to some good CSS forums?

heres my current CSS:

.highlightit img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
-moz-opacity: 0.5;
border: 4px solid #59A5D1;
display: block;
margin-left: auto;
margin-right: auto

}

.highlightit:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
border: 4px solid #FF5D38;
}

And the html looks like this:
<a href=”#” class=“highlightit”><img src=“one.jpg”></a>