Как сделать чтобы изображение темнело при наведении?

Сейчас использую такой код:

.gallery {
max-width: 840px;
height: auto;
text-align: center;
}

.gallery-item {
background: #000;
position: relative;
left:-10px;
}

.gallery img {
max-width: 840px;
height: auto;
transition: all 0.2s ease;
}
.gallery img:hover { opacity: 0.6; }

Суть в том, что картинка находится в диве gallery-item, он черного цвета, по этому когда наводишь на картинку, она становится прозрачней, тем самым темнея. Однако, gallery-item растягивается на все максимальные 840px, и если картинка в ширину меньше этого числа, то по бокам черные полосы, естественно они не нужны, есть ли способ как-то решить это маленькую проблему?