title: Image when hovered overlaps sticky header
body: <p>I have a grid where images are link to articles, and when images are hovered they get little darker, but if sticky header is at that time over them, hovering them overlaps the header. I've tried with <code>z-index</code> but it doesn't work.</p>
  
  <p>Is there any way to fix this other than making header fixed, because I have some info above header with logo and links, and switching images with same but darker versions while hovered doesn't seem like elegant solution.</p>
  
  <p>Image:</p>
  
  <p><a href="https://i.stack.imgur.com/NBFKr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NBFKr.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>header {
    background-color: red;
    padding: 10px;
    position: sticky;
    top: 0;
  }
  
  .test {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 100px 100px;
    margin: 50px;
  }
  
  .test1 {
    grid-column: 1 / 3;
    background-color: yellow;
  }
  
  .test2 {
    grid-column: 1 / 2;
    background-color: blue;
  }
  
  .test3 {
    grid-column: 2 / 3;
    background-color: green;
  }
  
  .image:hover {
    filter: brightness(0.8);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;p&gt;To make header sticky&lt;/p&gt;&lt;br&gt;
      &lt;p&gt;To make header sticky&lt;/p&gt;&lt;br&gt;
      
      &lt;header&gt;
        &lt;p&gt;
          Sticky header Sticky header Sticky header Sticky header
        &lt;/p&gt;
      &lt;/header&gt;
      
      
      
      &lt;div class="test"&gt;
      
        &lt;div class="test1"&gt;
          TEST1
        &lt;/div&gt;
      
      
        &lt;div class="test2 image"&gt;
          IMAGE1
        &lt;/div&gt;
      
      
        &lt;div class="test3 image"&gt;
          IMAGE2
        &lt;/div&gt;
      
      &lt;/div&gt;
      
      &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;</code></pre>
  </div>
  </div>
  </p>