Darkening an image with CSS (In any shape)

Question

So I have seen quite a few ways to darken images with CSS, including ones with rounded corners, but my problem is different.

Let\'s say I have an .png image that loo

Answer 1

I would make a new image of the dog's silhouette (black) and the rest the same as the original image. In the html, add a wrapper div with this silhouette as as background. Now, make the original image semi-transparent. The dog will become darker and the background of the dog will stay the same. You can do :hover tricks by setting the opacity of the original image to 100% on hover. Then the dog pops out when you mouse over him!

style

.wrapper{background-image:url(silhouette.png);} 
.original{opacity:0.7:}
.original:hover{opacity:1}