Change alpha for an image hover in CSS2 standard?

Question

i'm trying to add alpha effect for my image. the image is in rounded corner rectangular shape. i know there is attributes to change the alpha in CSS3, but i'm trying to be compliant with the w3c standard, which is still CSS2.

Sorry i didn't state my question correctly ealier. i was trying to change the alpha when i hover over the image using CSS2. i'm thinking to use the "background-image" for 100% alpha, and use the img tag for the 50% alpha. is there any better way to do this?

Answer 1

If the image is a PNG, you can include alpha directly in the image. Of course this would require the PNG Fix script for IE6.

Otherwise, you can use CSS to set the transparency.

Edit: Updated to only work on hover, note that this won't work in IE6.

img.transparent{
    filter: alpha(opacity=100); /* internet explorer */
    opacity: 1;           /* fx, safari, opera, chrome */
}

img.transparent:hover {
    filter: alpha(opacity=50); /* internet explorer */
    opacity: 0.5;           /* fx, safari, opera, chrome */
}

Answer 2

The typical way a web developer implements the transparent effects is using a partially transparent PNG file as a background.

div {
  background: #FFF url(img/bg.png) repeat top left;
}

Using the png will work as you would expect, however opacity doesn't work as expected:

div {
  filter: alpha(opacity=50); /* IE */
  -moz-opacity: 0.5; /* Firefox */
  -webkit-opacity: 0.5; /* Older Safari, Webkit */
  opacity: 0.5; /* CSS Standard - Always last in the list */
}

This will make DIV 50% transparent, including all of its children, text and all. You will really need to play around with the opacity settings to make sure you get results as you would expect.

Answer 3

An even simpler fix, if you can stand a slightly worse user experience for IE6, is to use an alpha-transparent image for all modern browsers, and send an image with no transparency (or just one-color) to IE6. Looks a little worse for those few users, but is a lot less code to maintain.