Как отемнить hover эфект?

Question

[Алексей Стововой]

div{
width: 200px;
height: 200px;
background:url('www.online-image-editor.com/styles/2013/images/exa...');
position: relative;
}

div:hover{
opacity:0.8;
-moz-opacity:0.8;
filter: alpha(opacity=80) black;
-khtml-opacity: 0.8;
background-color:#000;
}
div:hover:after{
display:none;
}

Вот CSS код как сделать так чтоб над картинкой фон не осветлялся, а затемлялся ?

Comments

[Максим Софронов]

а зачем вы при наведении на див делаете дисплей-нон псевдоэлементу, когда у вас этот псевдоэлемент даже не описан?

PS opacity можно писать без префиксов уже давно caniuse.com/#search=opacity

Answer 1

[Андрей]

Как раз таки с помощью :after вот бы и затемнял.
https://jsfiddle.net/xgunnwoo/

Answer 2

[DrGosh_m]

Еще такой вариант возможен. Без псевдо.

div:hover{
  background-blend-mode: hard-light;
    background-color: #000;
}

Answer 3

[Роман Александрович]

https://jsfiddle.net/sfc1d1pp/

Comments

[Алексей Стововой]

Ничего не изменилось

[Алексей Стововой]

Нужно сильное затемление

[Роман Александрович]

Алексей Стововой: filter: brightness(50%);