title: Overlay on hover in React, the JS way
body: <p>I'm trying to do an overlay when hovering images in React with this tutorial: <a href="https://www.w3schools.com/howto/howto_css_image_overlay.asp" rel="nofollow noreferrer">w3 schools tutorial</a>.</p>
  
  <p>My code:</p>
  
  <pre><code>&lt;div className="grid-item" key={movie.id}&gt;
                              &lt;img className="grid-images" alt={movie.title} src={movie.src}&gt;
                                  &lt;div className="overlay"&gt;{movie.title}&lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>My error message: <code>Parsing error: Expected corresponding JSX closing tag for &lt;img&gt;</code></p>
  
  <p>As JSX doesn't allow not closing the img-tag, this method doesn't work. I can't seem to find an alternative how to do this in React with css. Anyone? :) Thanks!</p>