Как при наведении на картинку сделать эффект затемнения?

Question

[keche]

Как при наведении на картинку сделать эффект затемнения с иконкой из картинки png в середине?

Пример на картинке.

Answer 1

[HamSter]

Стандартно же, на любом сайте можно посмотреть реализацию.

Обертка или ссылка, внутри изображение:

<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;
}

Comments

[Egor]

Просто накинуть фон можно и свойством filter, но задача была добавить и изображение и текст.
При том они должны появляется плавно через transition.
Спасибо - хороший вариант! Буду использовать как основной.
PS: К a:before с изображением обязательно добавьте z-index: 1

Answer 2

[Петр]

Отобразите поверх div с черной заливкой и сделайте его полупрозрачным.

Answer 3

[Egor]

Вариант №1 - подложка с иконкой: https://codepen.io/Softwider/pen/PoReMQj
Вариант №2 - подложка с иконкой и текстом: https://codepen.io/Softwider/pen/ExELqVr

Вариант №2 предпочтительнее так-как более лаконичный.
К обоим вариантом добавил анимацию через transition.
Центровку текста и иконки во втором осуществил с помощью flex (а в первом через background center center).

Спасибо HamSter

Answer 4

[Negwereth]

CSS filters:

https://paulund.co.uk/css-filter
caniuse.com/#feat=css-filters

Answer 5

[Nevada18]

вешать hover на обертку img, при наведении иконку делать visibility: visible.

.img_wrapper:hover {
  ...
  background: rgba(0,0,0,0.5) //прозрачность сами выставите
}

img_wrapper:hover .icon {
 visibility: visible
}

как то так

Answer 6

[Vlad Feninets]

<div class="block">
	...
</div>

.block {
	position: relative;
}
.block::before {
	content: normal;
}

.block::after{
	content: normal;
}

.block:hover::before {
	content: ''
}

.block:hover::after {
	content: ''
}

.block::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	heigth: 0;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 1;
}

.block::after {
	position: absolute;
	background: url('icon.png');
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}

Answer 7

[Сергей Лещенко]

По быстрому как то так https://jsbin.com/pokunufiho/edit?html,css,output

Но иконка будет тоже прозрачной. Чтобы это устранить нужно сделать картинку нужной прозрачности и фоном добавить к блоку. По умолчанию скрывающейся блок display: none, а чтобы появился пишем это .img-block:hover .hover-block{
display: block;
}
Ну и добавить время,чтобы это было плавно.