title: Color transparency overlay on hover
body: <p>Working on my personal site and I have images that upon hover I would like to have a dark red overlay that is somewhat transparent. So far all I can find with webkit is changing the brightness, saturation or hue of the photo.</p>
  
  <p>I might add that these features only work when I designate them to tags such as "img" and they don't work with "class" or "id."</p>
  
  <p>Any help would be great.</p>
  
  <p>Here is my code:</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div&gt;
  &lt;img src="images/amadea/book.jpg" alt="Amadea Bailey- Abstract Expressionist"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>img{
      display: block;
  }
  
  img:hover{
      -webkit-filter:  grayscale(100%) brightness(51%);
  }
  </code></pre>