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

Question

[HankeTM]

Добрый день!

Есть выпадающее меню и контент. При наведении на блок с меню контент должен затемняться.

С этим кодом не получается:

ul.menu:hover #content {
filter: brightness(25%);
}

Не срабатывает из-за разного уровня блоков? Или вообще это не удастся сделать только посредством css?

Comments

[iBird Rose]

залей на https://jsfiddle.net/

Answer 1

[Сергей delphinpro]

https://jsfiddle.net/77umgcp3/

Comments

[Максим]

не обычно и без обёртки - хм...

[Smeecy Smeecy]

Сергей а если не секрет для чего делаете left: -100% а не просто left: 0 ?

[HankeTM]

Smeecy Smeecy, я так понимаю блок всегда находится на сайте, только не покрывает контент как раз посредством left:-100%, а при ховере наоборот left:0, чтобы блок шел от левой границы экрана к правой.

Да, необычно. А без создания дополнительного div'a нельзя сделать этот эффект? Допустим через "filter".

[Smeecy Smeecy]

HankeTM: ой не заметил , думал что именно 'left:-100%' свойство при hover'e