Ary Djmal

Let’s say you have an image that when you hovered you want to highlight (ie. make it brighter). Instead of dealing with two different images you can just use opacity.

In your html:

<a href="#" class="image">
  <img src="/some_image.jpg" />
</a>

In your css:

a.image img {
  opacity: 0.60;
  -moz-opacity: 0.60;
  filter:alpha(opacity=60);
}

a.image:hover img {
  opacity: 1;
  -moz-opacity: 1;
  filter:alpha(opacity=100);
}

Demo