Colorizing Images on Hover Using CSS

Question

I am wondering if it is possible to recolour images using CSS.

Here is an example fragment showing what I want to do (you can play with it here: http://jsfiddle.net/NPmUX/)

HTML

<a href="#" class="upgrade_link cannons"><strong>Autoblaster (5)</strong><br>
Attack: Attack 1 ship. Your <img title="hit" class="inline_action_icon" src="http://xwing-builder.co.uk/images/hit_icon.png"> results cannot be cancelled by defense dice. The defender may cancel <img title="critical" class="inline_action_icon" src="http://xwing-builder.co.uk/images/critical_icon.png"> results before <img title="hit" class="inline_action_icon" src="http://xwing-builder.co.uk/images/hit_icon.png"> results. Attack value: 3. Range 1.</a>

CSS

.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;
}

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?

I have been playing about with CSS3 Filters (in Chrome - other browsers don't support them yet) but hue-rotate doesn't work (presumably because the images are monochrome to start with).

Is there a way to colorize the images either with filters or by another technique?

(Obviously I could just create lots of differently-coloured image files in Photoshop... I am hoping for a programmatic solution)

Thank you

Answer 1

One trick I use make the image and actual mask, so the icon is transparent and the border is white (or whatever the background is).

Wrap the image in a div (or set it as the background of a div)

Then you can change the background color of the wrapping div to whatever you like, just like the text and the icon will be that color.

This solution only works on a solid color background.