Удалить фильтр CSS для дочерних элементов ⇐ CSS

[Anonymous]

У меня проблема с CSS-кодом.

Как видите, у меня есть фильтр для элемента li, но он перекрывает другие элементы. Мне нужно сделать так, чтобы у двух других элементов не было фильтра:

Есть ли возможность это сделать.

< div class="snippet">

Код: Выделить всё

.main {
width:300px;
height:300px;
background-color:blue;
list-style:none;
}

.button {
position: absolute;
top: 35% ;
height: 30px;
width: 120px;
display: none;
z-index: 99;
background-color:black;
color:white;
}

.icon {
width: 30px;
position: absolute;
z-index: 99;
display: none;
width:100px;
}

.main:hover > .button {
display: block;
filter: none;
}

.main:hover > .icon {
display: block;
filter: none;
}

.main:hover {
filter: brightness(50%);
transition: 0.5s;
}

Код: Выделить всё

[*]
[img]https://help.seesaw.me/hc/en-us/article_attachments/204081043/bear.png[/img]
[url=#]Button[/url]

Подробнее здесь: https://stackoverflow.com/questions/511 ... d-elements