Send to a Friend

mirza's avatar

Is there a better way to do this in CSS ?

Asked by mirza (5042points) 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{
-moz-opacity: 0.5;
border: 4px solid #59A5D1;
display: block;
margin-left: auto;
margin-right: auto


.highlightit:hover img{
-moz-opacity: 1;
border: 4px solid #FF5D38;

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

Using Fluther


Using Email

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