11

I am interested in dynamically modifying an image with transparent background, and achieving that using CSS.

What I actually need, is creating a kind of a silhouette, so that all non-transparent pixels, have a color applied to them. In this case, Black.

The before and after should look something like this:

Before enter image description here After

Note both images have a transparent background.

Is there a method that can be used to perform this using CSS?

If not, is there an easy way to generate the silhouette and switch between the two images, on the client side, in a webpage context? Modern browsers can be assumed.

Any kind of help is greatly appreciated.

Improve this question
9
  • 1
    Use an image editor, or a programming language of some kind. This isn't a job for CSS. Commented Sep 24, 2015 at 21:00
  • Thanks, though as mentioned, this has to be done dynamically, as I cannot predict the image that's to be used. If this were a single image I wouldn't have bothered. That said, I wouldn't be surprised if there WAS a trick in CSS's sleeve. Commented Sep 24, 2015 at 21:03
  • This can be done in CSS, give me a few minutes. Commented Sep 24, 2015 at 21:05
  • 1
    filter: grayscale(100%) contrast(0%) brightness(0%); play around with this, but it won't completely fit your needs, I guess Commented Sep 24, 2015 at 21:06
  • @TinyGiant this is a great job for css, it's much more flexible: you can handle this for any uploaded image, without server image processing overhead, and for internal websites where images might be prepared, you don't need every admin to be able to use photo-shop Commented Sep 24, 2015 at 21:11

2 Answers 2

Reset to default
15

An effect like this can be achieved using webkit filters:

img {
    -webkit-filter: grayscale(100%);
    -webkit-filter: contrast(0%);
    -webkit-filter: brightness(0%);
}

img:hover {
    -webkit-filter: grayscale(0%);
    -webkit-filter: contrast(100%);
    -webkit-filter: brightness(100%);
}

and a jsfiddle to demonstrate: http://jsfiddle.net/7Ljcgj79/

Note that this method won't be support on all browsers. To support IE, you could set this as a background-image and change it on hover.

Using two images for better browser compatibility

If you're willing to use two images, you can achieve the same effect with much wider browser support by simply swapping the image on hover. Something like this:

div {
    height: 400px;
    width: 400px;
    background-image: url('https://i.sstatic.net/Pmz7l.png');
    background-repeat: no-repeat;
}

div:hover {
    background-image: url('https://i.sstatic.net/gZw5u.png');
}

And an updated fiddle: http://jsfiddle.net/7Ljcgj79/2/

Improved example supporting all colors

I hadn't visited this post in awhile, and I definitely see now that it could have been improved (all I had to do was set brightness to 0%, nothing else was necessary and in fact had no effect). I wanted to give an updated answer, though, in response to a comment. This solution takes a little more work, but supports all colors, not just black! Here are the important bits:

HTML

<svg>
    <filter id="monochrome" color-interpolation-filters="sRGB">
        <!-- change last value of first row to r/255 -->
        <!-- change last value of second row to g/255 -->
        <!-- change last value of third row to b/255 -->
        <feColorMatrix type="matrix" 
            values="0 0 0 0 0.6588 
                    0 0 0 0 0.4745 
                    0 0 0 0 0.1686 
                    0 0 0 1 0" />
    </filter>
</svg>

CSS

img {
    -webkit-filter: url(#monochrome);
    filter:  url(#monochrome);
}

img:hover {
    filter: none;
}

And an updated fiddle: http://jsfiddle.net/7Ljcgj79/16/

This technique takes advantage of the <fecolormatrix>, basically an advanced feature for defining your own filters. What I did here was to turn all color channels down to zero (all zeros for the first four columns), then add to them the constant value that I needed (that's the last column). Make sure in your <filter> tag to have type="matrix" and and in your <fecolormatrix> set color-interpolation-filters="sRGB" or it will interpret your matrix differently.

These posts were super helpful if you want to learn more: https://alistapart.com/article/finessing-fecolormatrix and https://css-tricks.com/color-filters-can-turn-your-gray-skies-blue/

Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

nicely done, I knew it was filters, I just haven't used them enough to answer quickly - you ought to link to some browser support stuff, I think this will be important in this example
No need to confine just to webkit: jsfiddle.net/orvn/7Ljcgj79/1 (No IE compatibility though)
If you only want to support half of the users on the internet, this is a great solution.
@pgruber I am currently doing something similar to this but i wish to have a colored filter for example #a8792b any idea how i could get the desired output? Any help will be greatly appreciated. :)
@DylanAnlezark hey man, definitely more of a challenge! But I think I found the answer, check out the update!
|
1

What you will need is two things:

  1. Insure that the image WILL ALWAYS be a PNG with transparent Background
  2. Use of the filter property.

HTML

<img src="http://www.iceni.com/blog/wp-content/uploads/2013/08/EBay_logo.png">

CSS

img{
    -webkit-filter: drop-shadow(20px 0px 2px rgb(0,0,0));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#000')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#000')";
}

And here is a JSFiddle

Improve this answer

1 Comment

Thanks for the comment! Fails for me on Edge/IE.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.