Can I change the appearance of an html image during hover without a second image?

Question

Is there a way to change the appearance of an icon (ie. contrast / luminosity) when I hover the cursor, without requiring a second image file (or without requiring a hidden portion of the image)?

Answer 1

Here's some good information about image opacity and transparency with CSS.

So to make an image with opacity 50%, you'd do this:

<img src="image.png" style="opacity: 0.5; filter: alpha(opacity=50)" />

The opacity: part is how Firefox does it, and it's a value between 0.0 and 1.0. filter: is how IE does it, and it's a value from 0 to 100.

Answer 2

You don't use an img tag, but an element with a background-image css attribute and set the background-position on hover. IE requires an 'a' tag as a parent element for the :hover selector. They are called css sprites.

A great article explaining how to use CSS sprites.

Answer 3

Here's some code to play with. Basic idea: put all possible states of the picture into one big image, set a "window size", that's smaller than the image; move the window around using background-position.

#test {
  display: block;
  width: 250px;  /* window */
  height: 337px; /*  size  */
  background: url(http://vi.sualize.us/thumbs/08/09/01/fashion,indie,inspiration,portrait-f825c152cc04c3dbbb6a38174a32a00f_h.jpg) no-repeat; /* put the image */
  border: 1px solid red; /* for debugging */
  text-indent: -1000px; /* hide the text */
}

#test:hover {
  background-position: -250px 0; /* on mouse over move the window to a different part of the image */
}

<a href="#" id="test">a button</a>

Answer 4

The way I usually see things done with smaller images such as buttons it that only a certain portion of the image is shown. Then many states of the picture will make up a larger picture which gets shifted around behind the visible port. I'll delete this when someone has code.