Send to a Friend

mirza's avatar

Is there a better way to do this in CSS ?

Asked by mirza (5029 points ) December 26th, 2007

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>

Using Fluther

or

Using Email

Separate multiple emails with commas.
We’ll only use these emails for this message.