title: Colorizing Images on Hover Using CSS
body: <p>I am wondering if it is possible to recolour images using CSS.</p>
  
  <p>Here is an example fragment showing what I want to do (you can play with it here: <a href="http://jsfiddle.net/NPmUX/" rel="nofollow">http://jsfiddle.net/NPmUX/</a>)</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;a href="#" class="upgrade_link cannons"&gt;&lt;strong&gt;Autoblaster (5)&lt;/strong&gt;&lt;br&gt;
  Attack: Attack 1 ship. Your &lt;img title="hit" class="inline_action_icon" src="http://xwing-builder.co.uk/images/hit_icon.png"&gt; results cannot be cancelled by defense dice. The defender may cancel &lt;img title="critical" class="inline_action_icon" src="http://xwing-builder.co.uk/images/critical_icon.png"&gt; results before &lt;img title="hit" class="inline_action_icon" src="http://xwing-builder.co.uk/images/hit_icon.png"&gt; results. Attack value: 3. Range 1.&lt;/a&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.upgrade_link {
      background-position: 0 2px;
      background-repeat: no-repeat;
      color: #000000;
      display: block;
      margin-bottom: 10px;
      margin-top: -2px;
      padding-left: 28px;
      transition: color 0.2s ease 0s;
      text-decoration: none;
  }
  
  .upgrade_link.cannons {
      background-image: url("http://xwing-builder.co.uk/images/cannon_icon_lg.png");
  }
  
  .inline_action_icon {
      margin-top: -2px;
      vertical-align: middle;
  }
  
  .upgrade_link:hover {
      color: #597690;
  }
  </code></pre>
  
  <p>The link tag contains inline and background images. When rolled over, the text changes colour. Is it possible to also change the colour of either image type? </p>
  
  <p>I have been playing about with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter" rel="nofollow">CSS3 Filters</a> (in Chrome - other browsers don't support them yet) but hue-rotate doesn't work (presumably because the images are monochrome to start with).</p>
  
  <p>Is there a way to colorize the images either with filters or by another technique? </p>
  
  <p><em>(Obviously I could just create lots of differently-coloured image files in Photoshop... I am hoping for a programmatic solution)</em></p>
  
  <p>Thank you</p>