Image Opacity Hover Fix for IE6

IE6 is known to have a host of CSS limitations, forcing web designers to come up with creative ways around the new CSS standards and Microsoft's poor integration of the new standards and their own proprietary way of doing things.

Early in my web design days, I found out about the wonderful psuedo :hover and the ability to make images transparent when hovered over, or originally transparent then full opacity when hovered over.

This is typically accomplished with the new css of img:hover but, IE6 doesn't recognize anything except a:hover. I found a simple workaround which will let you create an alpha transparent image that can be hovered in IE6 and also works in Firefox, IE7, Opera etc., without having to create separate code.

Instead of applying the :hover to the <img /> tag such as: img:hover, apply it like you normally would, to the anchor <a> tag, followed by the <img /> tag in your css, like so: a:hover img.

Words do no justice... here is an example!

<style type="text/css">
.imagehover a:hover img {
  opacity: .75;
  -moz-opacity: .75;
  -khtml-opacity: .75;
  filter: alpha(opacity=75);
}
</style>

<div class="imagehover">
<a href="files/images/lake_foto.jpg" rel="lightbox"><img src="files/images/lake_foto.jpg" width="350px" /></a>
</div>