Asked  7 Months ago    Answers:  5   Viewed   86 times

Given a transparent PNG displaying a simple shape in white, is it possible to somehow change the color of this through CSS? Some kind of overlay or what not?



You can use filters with -webkit-filter and filter: Filters are relatively new to browsers but supported in over 90% of browsers according to the following CanIUse table:

You can change an image to grayscale, sepia and lot more (look at the example).

So you can now change the color of a PNG file with filters.

body {
    min-width: 800px;
    min-height: 400px
img {
/*Filter styles*/
.saturate { filter: saturate(3); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }
<!--- img src -->
<img alt="Mona Lisa" src="" title="original">
<img alt="Mona Lisa" src="" title="saturate" class="saturate">
<img alt="Mona Lisa" src="" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="" title="contrast" class="contrast">
<img alt="Mona Lisa" src="" title="brightness" class="brightness">
<img alt="Mona Lisa" src="" title="blur" class="blur">
<img alt="Mona Lisa" src="" title="invert" class="invert">
<img alt="Mona Lisa" src="" title="sepia" class="sepia">
<img alt="Mona Lisa" src="" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="" title="opacity" class="rss opacity">


Tuesday, June 1, 2021
answered 7 Months ago

Firstly, use an IMG tag in your HTML to embed an SVG graphic. I used Adobe Illustrator to make the graphic.

<img id="facebook-logo" class="svg social-link" src="/images/logo-facebook.svg"/>

This is just like how you'd embed a normal image. Note that you need to set the IMG to have a class of svg. The 'social-link' class is just for examples sake. The ID is not required, but is useful.

Then use this jQuery code (in a separate file or inline in the HEAD).

     * Replace all SVG images with inline SVG
            var $img = jQuery(this);
            var imgID = $img.attr('id');
            var imgClass = $img.attr('class');
            var imgURL = $img.attr('src');

            jQuery.get(imgURL, function(data) {
                // Get the SVG tag, ignore the rest
                var $svg = jQuery(data).find('svg');

                // Add replaced image's ID to the new SVG
                if(typeof imgID !== 'undefined') {
                    $svg = $svg.attr('id', imgID);
                // Add replaced image's classes to the new SVG
                if(typeof imgClass !== 'undefined') {
                    $svg = $svg.attr('class', imgClass+' replaced-svg');

                // Remove any invalid XML tags as per
                $svg = $svg.removeAttr('xmlns:a');

                // Replace image with new SVG

            }, 'xml');


What the above code does is look for all IMG's with the class 'svg' and replace it with the inline SVG from the linked file. The massive advantage is that it allows you to use CSS to change the color of the SVG now, like so:

svg:hover path {
    fill: red;

The jQuery code I wrote also ports across the original images ID and classes. So this CSS works too:

#facebook-logo:hover path {
    fill: red;


.social-link:hover path {
    fill: red;

You can see an example of it working here:

We have a more complicated version that includes caching here:

Tuesday, June 1, 2021
answered 7 Months ago

Imagemagick doesn't support JXR only if:

"Requires the jxrlib delegate library. Put the JxrDecApp and JxrEncApp applications in your execution path."

If you have managed to install libjxr0 and the libjxr-tools linux packages, you will face the next problem, if you don't know how the two apps JxrEncApp and JxrDecApp are executed.

So here is the needed background:

  • Supports only BMP,TIF and HDR
  • Errors are not displayed only!!!!! the whole man page
  • Quality parameter starts at 0.000 and ends at 1.000

A call looks like this:

JxrEncApp -i test.tif -o test.jxr -q 0.231
Saturday, November 6, 2021
answered 1 Month ago

This will show the icon when you hover the thumbnail, and when you hover the icon on top of that, it will change to a hover icon.

.image-thumb, .image-thumb img {
.image-fav {
.image-thumb:hover .image-fav {
.image-fav:hover {

<div class="image-thumb">
  <img src="thumb.jpg" />
  <a href="#" class="image-fav"></a>


Thursday, November 11, 2021
answered 1 Month ago

Edit it in an XML editor and if you know the color values, just change it.

Or, you can go to THIS LINK and make your edit.

Hope this helps.

Tuesday, December 7, 2021
answered 2 Days ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :