Overlay non-transparent area of image with CSS

Question

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:

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.

Answer 1

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('http://i.stack.imgur.com/Pmz7l.png');
    background-repeat: no-repeat;
}

div:hover {
    background-image: url('http://i.stack.imgur.com/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/

Answer 2

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