title: Color overlay over HTML img
body: <p>I'm stuck at styling HTML image (<code>&lt;img&gt;</code>). I can't find a way to add a white overlay over image.
  I have been trying this - <a href="https://stackoverflow.com/questions/28710659/css-background-image-on-top-of-img">CSS background image on top of &lt;img&gt;</a> (Doesn't work).</p>
  <p>HTML</p>
  <pre><code>&lt;img class=&quot;default-user&quot; src=&quot;https://minotar.net/helm/Steve/16.png&quot;&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>.default-user {
      position: absolute;
      outline: #e8e8e8 solid 1px;
      -webkit-filter: grayscale(50%);
      filter: grayscale(50%);
  }
  </code></pre>
  <p>Is there any way to add overlay? Thank you for your help!</p>