title: Create mouseover effect for image description in Javascript
body: <p>I have an array in JSON that I have formatted into a grid into HTML and styled using CSS. Using console.log it shows everything in my array. 
  Does anyone know how I can get a mouseover effect show the image details such as the "title" &amp; "tags" information over the image. </p>
  
  <p>I have found what I need on the link below but i'm rather confused how to implement it using javascript in the link below- 
  <a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade" rel="nofollow noreferrer">https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade</a></p>
  
  <p>Really trying to learn Javascript but can't find anything on this topic that is helpful at all.</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>const cont = document.querySelector(".cont");
  const imageTitle = document.querySelector(".imageTitle");
  const images = [{
      "src": "image1.jpeg",
      "title": "A two tone wall",
      "tags": ["wall", "two tone"]
  
    },
    {
      "src": "image2.jpeg",
      "title": "Cute doggy",
      "tags": ["dog", "walkies "]
    },
    {
      "src": "image3.jpeg",
      "title": "Natural splendor",
      "tags": ["natural", "mountain"]
    },
    {
      "src": "image4.jpeg",
      "title": "Man looking at phone",
      "tags": ["man", "phone"]
    },
    {
      "src": "image5.jpeg",
      "title": "Wavey wave",
      "tags": ["water", "wave"]
    },
    {
      "src": "image6.jpeg",
      "title": "Mountain range",
      "tags": ["mountain", "grass"]
    }
  
  
  ];
  images.forEach(function(par) {
    cont.innerHTML += `&lt;img src="${par.src}" content="${par.tags}" alt="${par.title}"&gt;`;
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.cont {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  
  img {
    width: 400px;
    height: 300px;
    margin: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="cont"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>