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

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.

Answer 2

Here's some good information about image opacity and transparency with CSS: http://www.w3schools.com/css/css_image_transparency.asp

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 3

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.

http://www.alistapart.com/articles/sprites/

Answer 4

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 then the image; move the window around using background-position

<style type="text/css" media="screen">
   #test {
       display: block; width: 250px; height: 337px; /* window 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 0px; /* on mouse over move the window to a different part of the image */
   }
</style>

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