Can I change the appearance of an html image while hovering without a second image?

Question

Is there a way to change the appearance of the icon (i.e. contrast / brightness) when I hover over without requiring a second image file (or without requiring a hidden part of the image)?

Answer 1

Here is some good information about image opacity and transparency using CSS .

So, to make an image with an opacity of 50%, you will do the following:

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

The opacity: part is how Firefox does it, and the value is from 0.0 to 1.0. filter: as IE does, and this value is from 0 to 100.

Answer 2

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

Great article explaining how to use CSS sprites .

Answer 3

Here is the code for the game. The main idea: put all possible states of the image into one large image, set the "window size", which is 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

As usual, I see what is being done with smaller images, such as buttons, on which only a specific part of the image is displayed. Many image states will then contain an enlarged image that moves around the visible port. I will remove this if someone has the code.