title: Adding an opaque overlay to an image in React
body: <p>In a React functional component I'm trying to add an image and then add an opaque overlay on top if it.</p>
  
  <p>I've tried the following code sections in my css and react.js files:</p>
  
  <p>In the css file:</p>
  
  <pre><code>.Image {
      background-color: #2F5596;
  }
  
  .Overlay {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 50%;
      height: 100%;
      background-color: 'rgba(0, 0, 0, 0.5)';
    }
  </code></pre>
  
  <p>In the js file:</p>
  
  <pre><code>import logo from '../../assets/images/WhiteLettering_BlueBackground/WhiteLettering_BlueBackground_256.png';
  import classes from './Layout.css';
  
  const layout = (props) =&gt; {
      return (
  
          &lt;div className={classes.Image}&gt;
              &lt;img src={logo} className={classes.Overlay} /&gt;
          &lt;/div&gt;
  
      )
  }
  
  export default layout;
  </code></pre>
  
  <p>While the "logo" shows up perfectly with the blueish background, the opaque overlay does not appear.</p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>Thanks,</p>