Have font awesome inside child div on top of brightness filter

Question

I am trying to make a div, and when you hover this div a font awesome icon shows up that's in a hidden div that only shows when you hover the first div.

I have a filter on the parent div when i hover it, but the font awesome icon is under the brightness filter.

Is there any way to put the font awesome icon above the filter? and still keeping the child div inside the parent div?

Code:

HTML

<div class="collapsible-header">
  <div class="cover">
    <i
      class="fas fa-hand-holding-usd fa-lg fa-fw"
      style="
        color: #fff !important;
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 1000 !important;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        opacity: 100 !important;
      "
    ></i>
  </div>
</div>

CSS

.collapsible-header .cover {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.collapsible-header:hover > div {
    display: block;
}

.collapsible-header:hover {
    filter:brightness(50%);
}

This is the default collapsible header from materialize css. If you guys need any more info on it just say so in comments thank you.

Regards.