Darken background image on hover

Question

How would I darken a background image on hover without making a new darker image?

CSS:

.image {   background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');   width: 58px;   height: 58px; } 

JSFiddle link: http://jsfiddle.net/qrmqM/1/

Answer 1

Similar, but again a little bit different.

Make the image 100% opacity so it is clear. And then on img hover reduce it to the opacity you want. In this example, I have also added easing for a nice transition.

img {     -webkit-filter: brightness(100%); }  img:hover {     -webkit-filter: brightness(70%);     -webkit-transition: all 1s ease;     -moz-transition: all 1s ease;     -o-transition: all 1s ease;     -ms-transition: all 1s ease;     transition: all 1s ease; } 

That will do it, Hope that helps.

Thank you Robert Byers for your jsfiddle