title: Have font awesome inside child div on top of brightness filter
body: <p>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.</p>
  <p>I have a filter on the parent div when i hover it, but the font awesome icon is under the brightness filter.</p>
  <p>Is there any way to put the font awesome icon above the filter? and still keeping the child div inside the parent div?</p>
  <p>Code:</p>
  <p>HTML</p>
  <pre><code>&lt;div class=&quot;collapsible-header&quot;&gt;
    &lt;div class=&quot;cover&quot;&gt;
      &lt;i
        class=&quot;fas fa-hand-holding-usd fa-lg fa-fw&quot;
        style=&quot;
          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;
        &quot;
      &gt;&lt;/i&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>.collapsible-header .cover {
      display: none;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
  }
  
  .collapsible-header:hover &gt; div {
      display: block;
  }
  
  .collapsible-header:hover {
      filter:brightness(50%);
  }
  </code></pre>
  <p>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.</p>
  <p>Regards.</p>