@keche

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

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

Пример на картинке.
15e27f83e99845a4b04c9b8a275be3a2.jpg
  • Вопрос задан
  • 19074 просмотра
Пригласить эксперта
Ответы на вопрос 7
HamSter007
@HamSter007
HTML/CSS верстальщик
Стандартно же, на любом сайте можно посмотреть реализацию.

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

<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;
}
Ответ написан
petermzg
@petermzg
Самый лучший программист
Отобразите поверх div с черной заливкой и сделайте его полупрозрачным.
Ответ написан
@Nevada18
вешать hover на обертку img, при наведении иконку делать visibility: visible.

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

img_wrapper:hover .icon {
 visibility: visible
}


как то так
Ответ написан
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Большая полупрозрачная тень вокруг блока (или псевдоэлемента, не знаю, что вы используете) с лупой

https://jsfiddle.net/ykzwc9om/

Можно и фоном для :after, если не нужна видимая граница квадратика с лупой.
Тогда его (after) надо делать со 100% высотой и шириной и выровнять иконку по центру.
Ответ написан
fnnzzz
@fnnzzz
front-end dev
<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;
}
Ответ написан
По быстрому как то так https://jsbin.com/pokunufiho/edit?html,css,output

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы