Затенение картинки при наведении

Вполне можно обойтись одним изображением, уменьшая при наведении значение свойства opacity.

Но для достижения требуемого эффекта «затемнения», картинку следует поместить в контейнер вида inline-block с темным фоном и нулевой высотой строки.

Если же мы хотим оставить насыщенность картинки неизменной, а при наведении затемнить только нижнюю часть изображения, то надо создать блок с фоновой картинкой, а в него поместить блок с градиентой заливкой и нулевым значением свойства opacity, которое увеличивать принаведении.

В результате при наведении курсора мыши первая картинка будет становиться светлее, вторая будет затемняться, а у третьей появится тень в нижней части:

Исходный код этого примера:

<style>
    .dark {
        display: inline-block;
        background-color: rgba(0, 0, 0, 0.5);
        line-height: 0;
    }
    .img {
        display: inline-block;
        background: url("/java/ann.jpg");
        width: 100px;
        height: 147px;
    }
    .gradient {
        display: inline-block;
        background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.75));
        width: 100px;
        height: 147px;
        opacity: 0;
    }
    img:hover, .gradient:hover { opacity: .5; }
</style>

<img src="/java/ann.jpg" alt="">
<div class="dark"><img src="/java/ann.jpg" alt=""></div>
<div class="img"><div class="gradient"></div></div>

Такой метод можно использовать для всех картинок на странице, для которых вы пожелаете применить эффект «затемнения».