Is there a better way to do this in CSS ?
Asked by
mirza (
5057
)
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>
Observing members:
0
Composing members:
0
3 Answers
You could use CSS Sprites… at a very basic level, what you do it’s that both “states” of the image are on the same file, and on :hover, you use background-position to reveal the “active” image. You may have to edit your (X)HTML, but it should do the trick and it should work on all modern browsers.
You could also try:
.highligtit img{
filter: alpha(opacity=50); /* for MSIE */
opacity:0.5; /* for Firefox, Safari and Opera */
-moz-opacity:0.5; /* for Firefox (just in case) */
}
It would still not validate in CSS2.1, since “opacity” it’s a CSS3 property, but at least it would work in most browsers.
You could create two versions of the images: the semi-transparent and opaque one. Then you set one of them as the background image of a certain element and then when hovered you set the other image as background image.
Downside 1: to support IE6 the element would have to be <a>, since that’s the only one for which IE6 supports :hover .
Downside 2: using two versions greatly increases loading time.
If you’re not afraid of them, I’d consider using a PNG sprite. PNG’s use an alpha channel allowing you to create proper translucency while still keeping with the single-image like you were asking for. Downside to this approach is that Internet Explorer up to, and including, 6 does not support this natively. There are JavaScript methods to get around this, but it tends to be a little on the messy side.
If you’re forward-looking, it’s a good solution!
Answer this question 
This question is in the General Section. Responses must be helpful and on-topic.
Composing members:
0
