Photoshop Question posted in
The official user guide can be found here.

Colorizing Images on Hover Using CSS – Photoshop

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

Tags:

5

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    You can use SVGs and change the colors in CSS.

    <svg>
    <circle cx="50" cy="50" r="50"/>
</svg>

    CSS:

    circle {
  fill: black;
}
circle:hover {
  fill: red;
}

    http://jsbin.com/yayojeboku/1/edit?html,css,output

    Login or Signup to reply.
  3. 0

    I’m sure you’ve researched this extensively and you said you’ve been messing around with filters, so it wouldn’t surprise me if you already know you can change an image color hue, saturation, grayscale, etc with webkit filters. Which by definition, it colorizing 

    .saturate {-webkit-filter: saturate(5);}
.grayscale {-webkit-filter: grayscale(100%);}
.contrast {-webkit-filter: contrast(160%);}
.sepia {-webkit-filter: sepia(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);}
.rss.opacity {-webkit-filter: opacity(50%);}

    DEMO HERE

    Login or Signup to reply.
  4. 0

    if possible

    use .farbtastic jquery

    html

     <div id="colorpicker"></div>
<img src="http://i40.tinypic.com/6rt5sj.png" border="0">

    jquery

    $('#colorpicker').farbtastic(function(color){
    $('img').css("background-color",color);
});

    css color

    img{background-color:red;}
    Login or Signup to reply.
  5. 0

    If you use an iconic font, you can then handle it just as text.

    Well, it is text.

    A search for CSS icon font will get you a lot of resources.

    One good resource to begin with is fontello

    The easy way is to choose an icon from the already provided in different libraries.

    Else, there is the posibility to draw it using vector tools

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search