<p>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)?</p>

[{'answer_id': 60294, 'author': 'Flame', 'author_id': 5387, 'author_profile': 'https://Stackoverflow.com/users/5387', 'pm_score': 1, 'selected': False, 'text': "<p>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.</p>\n"}, {'answer_id': 60295, 'author': 'Paige Ruten', 'author_id': 813, 'author_profile': 'https://Stackoverflow.com/users/813', 'pm_score': 4, 'selected': True, 'text': '<p><a href="http://www.w3schools.com/css/css_image_transparency.asp" rel="nofollow noreferrer">Here\'s some good information about image opacity and transparency with CSS</a>.</p>\n\n<p>So to make an image with opacity 50%, you\'d do this:</p>\n\n<pre><code>&lt;img src="image.png" style="opacity: 0.5; filter: alpha(opacity=50)" /&gt;\n</code></pre>\n\n<p>The <strong>opacity:</strong> part is how Firefox does it, and it\'s a value between 0.0 and 1.0. <strong>filter:</strong> is how IE does it, and it\'s a value from 0 to 100.</p>\n'}, {'answer_id': 60316, 'author': 'Mike Schall', 'author_id': 4231, 'author_profile': 'https://Stackoverflow.com/users/4231', 'pm_score': 3, 'selected': False, 'text': '<p>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.</p>\n\n<p><a href="http://www.alistapart.com/articles/sprites/" rel="nofollow noreferrer">A great article explaining how to use CSS sprites</a>.</p>\n'}, {'answer_id': 60322, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 3, 'selected': False, 'text': '<p>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 <code>background-position</code>.</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>#test {\r\n  display: block;\r\n  width: 250px;  /* window */\r\n  height: 337px; /*  size  */\r\n  background: url(http://vi.sualize.us/thumbs/08/09/01/fashion,indie,inspiration,portrait-f825c152cc04c3dbbb6a38174a32a00f_h.jpg) no-repeat; /* put the image */\r\n  border: 1px solid red; /* for debugging */\r\n  text-indent: -1000px; /* hide the text */\r\n}\r\n\r\n#test:hover {\r\n  background-position: -250px 0; /* on mouse over move the window to a different part of the image */\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="#" id="test"&gt;a button&lt;/a&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}]
['https://Stackoverflow.com/questions/60290', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/3764/']