Стандартно же, на любом сайте можно посмотреть реализацию.
Обертка или ссылка, внутри изображение:
<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;
}
