Przyciemnienie obrazka po najechaniu myszką

Witam serdecznie,
Mam taką stronkę: http://46.29.150.76/igzm2/
i na niej 3 boxy WSPÓŁPRACA, AKTUALNOŚCI i SZKOLENIA.
Po najechaniu na nie myszką obrazek się rozjaśnia - a chciałbym żeby się przyciemniał.

Ma ktoś może pomysł jak to można zrobić?

Bardzo proszę o pomoc,
Northwest

Ustaw sobie na .wyprzedaz_zd tło czarne i później na hover ustaw przezroczystość obrazka np na 0.7

Rozwiązanie jQuerry

$('.wyprzedaz_zd').hover(function() {
    $(this).find('img').fadeTo(500, 0.5);
}, function() {
    $(this).find('img').fadeTo(500, 1);
});

.wyprzedaz_zd{   
    background: black;  
}

Rozwiązanie CSS

.wyprzedaz_zd img {
    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
         -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
}

.wyprzedaz_zd:hover img {
    opacity: 0.7;
            
}

https://jsfiddle.net/c0y0ep5w/

ten sposób z czarnym tłem nie działa (zobacz proszę co wyszło) :(

Wszystko przez to, ze div'a masz większego niż obrazek. Ustaw wielkość div'a identyczną jak obrazka i będzie ok.