title: Text over image gets hidden when a filter is applied to the image
body: <p>In the example below the text in the h1 element is hidden when the filter is applied to the image, and visible when the filter is disabled or turned off (set to none, or deleted the css applied to img tag):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Test&lt;/title&gt;
      &lt;style&gt;
      .item {
          position: relative;
          height: 500px;
      }
      h1 {
          height: auto;
          font-size: 30px;
          color:white;
          margin-top: -50%;
      }
      img {
          -webkit-filter: grayscale(100%);
          -moz-filter: grayscale(100%);
          -ms-filter: grayscale(100%);
          -o-filter: grayscale(100%);
          filter: grayscale(100%);
      }
      img:hover {
          -webkit-filter: none;
          -moz-filter: none;
          -ms-filter: none;
          -o-filter: none;
          filter: none;
      }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="item"&gt;
          &lt;img src="image.jpg" height="500" /&gt;
          &lt;h1&gt;some text&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Why is that happening?</p>