Overlay an opaque area of ​​an image using CSS

Question

I'm interested in dynamically changing an image with a transparent background and accomplishing this with CSS.

What I really need creates a kind of silhouette, so that all the opaque pixels have a color applied to them. In this case, black.

Before and after should look something like this:

Please note that both images have a transparent background.

Is there a method that can be used to accomplish this with CSS?

If not, is there an easy way to generate a silhouette and switch between two client-side images in the context of a web page? You can assume modern browsers.

Any help is 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 jsfiddle to demonstrate: http://jsfiddle.net/7Ljcgj79/

Please note that this method will not be supported in all browsers . To support IE, you can set this as background-image and change it on hover.

---

Using two images for better browser compatibility

If you want to use two images, you can achieve the same effect with much broader browser support by simply replacing the image with a hover . Something like that:

 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 the updated fiddle: http://jsfiddle.net/7Ljcgj79/2/

---

Improved example supporting all colors

I did not visit this post after a while, and I definitely see that it could be improved (all I had to do was set the brightness to 0%, nothing else was needed and actually had no effect). I wanted to give an updated answer, though, in response to the comment. This solution requires a bit 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 updated fiddle: http://jsfiddle.net/7Ljcgj79/16/

This method uses <fecolormatrix> , basically an advanced function, to define your own filters. What I did here is turn all the color channels to zero (all zeros for the first four columns) and then add to them the constant value that I need (this is the last column). Make sure that the <filter> has type="matrix" , and the <fecolormatrix> color-interpolation-filters="sRGB" , or it will interpret your matrix differently.

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

Answer 2

You will need two things:

• Make sure the image will ALWAYS be a PNG with a transparent background
• Using 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 the JSFiddle