← Back to home

CSS Tip: Two-State Images

August 04, 2008

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" />

In your css:

a.image img {
  opacity: 0.60;
  -moz-opacity: 0.60;

a.image:hover img {
  opacity: 1;
  -moz-opacity: 1;


Recommend Me

← Back to home