title: How can I add an image overlaying an img tag?
body: <p>Is there a way in CSS to add an image background over the image on an img tag?</p>
  
  <p>I have a tag on my site similar to</p>
  
  <pre><code>&lt;img src="image.jpg" alt="" /&gt;
  </code></pre>
  
  <p>and my CSS is as follows:</p>
  
  <pre><code>.field img {width: 354px; min-width: 354px; height: 200px; object-fit: cover;}
  </code></pre>
  
  <p>I can't conveniently edit the HTML, so I'm hoping to find a CSS solution. Is there something I can add to this CSS to overlay a background image <em>over</em> the image? I'm planning to add something which looks like a transparent "play" button over images which link to videos.</p>
  
  <p>There are many ideas online which answer this question, but I haven't seen one that doesn't require an extra div.</p>