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

Question

[Caesar1337]

Каким способом лучше сделать вот такой эффект? Создать блок в js и при наведении добавлять его?

Comments

[zorca]

Это работа для CSS, создается блок черного цвета с прозрачностью 0% поверх основного. При наведении прозрачность меняется на 100%.

Answer 1

[Александр Алексеев]

создать прозрачный темный блок position: absolute и при наведении делать его полупрозрачным

Comments

[Caesar1337]

Ну это понятное дело, а надпись и крест как сделать?

[Александр Алексеев]

крест background-image, псевдоэлементом или еще пару блоков
надпить паддингами подвинуть

[beDenz]

Caesar1337, внутри делаете еще один блок с нужным контекстом

[Caesar1337]

Принято, спасибо.

Answer 2

[Никита Левкович]

Простой вариант: если у вас затемняемое изображение это отдельный элемент (например #img, то расположите под ним черный фон, а на картинку навесьте

#img:hover {
opacity: 0.5
}

Больше вариантов можно легко нагуглить, например ТЫК