Как при наведении на картинку сделать эффект затемнения?
Стандартно же, на любом сайте можно посмотреть реализацию.
Обертка или ссылка, внутри изображение:<a href="#" class="img__link"> <img src="path" /></a>
дальше используются псевдоэлементы:a { display: block; position: relative; }

a:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5);  opacity: 0; }

a:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(icon-path); opacity: 0; }

a:hover:before,
a:hover:after { opacity: 1; }
Второй вариант (больше подходит если вн. есть еще и текст описание):<a href="#" class="img__link"> 
  <img src="path" />
  <span class="img__mask"><i class="img__icon"></i></span>
</a>
Стили примерно те же:a { display: block; position: relative; }

.mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5);  opacity: 0; }

a:hover:after {
  opacity: 1;
}
вешать hover на обертку img, при наведении иконку делать visibility: visible..img_wrapper:hover {
  ...
  background: rgba(0,0,0,0.5) //прозрачность сами выставите
}

img_wrapper:hover .icon {
 visibility: visible
}
как то так