Darken background image on hover

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;
}

Thank you Robert Byers for your jsfiddle

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)