title: Putting text on top of image not working?
body: <p>I am trying to overlay text onto the image and cannot figure out how too. This may be an easy question so if you can go into some detail on how it is done that would be much appreciated.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from "react";
  import { Typography } from "@material-ui/core";
  import topImg from "/Users/rayhewitt/Desktop/react-portfolio/src/imgs/topImg.jpeg";
  import useStyles from "./HeadStyles";
  
  const Head = () =&gt; {
    const classes = useStyles();
    return (
      &lt;div className={classes.top}&gt;
        &lt;img className={classes.image} src={topImg} alt="codingPic" /&gt;
        &lt;Typography className={classes.intro} align="center"&gt;
          Hey, im Ray Hewitt a UI/UX frontend developer
        &lt;/Typography&gt;
      &lt;/div&gt;
    );
  };
  
  export default Head;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>import { makeStyles } from "@material-ui/core";
  
  export default makeStyles({
    top: {
  backgroundColor: "rgba(8,89,145,255)",
  height: "5000px",
    },
    image: {
  paddingTop: "48px",
  width: "100%",
  zIndex: "100",
    },
    intro: {
  justifyContent: "center",
  position: "absolute",
  zIndex: "101",
    },
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>