title: Change multiple images/elements on hover for overlayed images HTML
body: <p>I created a notecard image where i overlayed multiple images on top of it. These are elements of the notecard. I want it so that when I hover over the notecard, I can completely change the contents on the notecard image (overlaying new things onto the notecard).</p>
  
  <p>So right now, I have this right now:</p>
  
  <pre><code>&lt;div style="position:relative;"&gt;
      &lt;a href="#games"&gt;
          &lt;img id "image_a" a" src="images/card_normal.png" onmouseover "this.src rc 'images/hover/card_hover.png';" ;" onmouseout "this.src rc 'images/card_normal.png';" ;" style="position: absolute; top: 0; left: 0;"/&gt;
          &lt;img id "image_b" b" src="images/category_icons/icon_games.png" style="position: absolute; top: 10px; left: 40px;"/&gt;
          &lt;img id "image_c" c" src="images/category_titles/title_games.png" style="position: absolute; top: 160px; left: 40px;"/&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Where the notecard changes into a "hovered" version, but I am unable to change anything else. I want it so that whenever the mouse pointer is in the notecard (including if its on other elements inside the notecard), the contents change. I want to completely scrap the contents of it (so the title and icon) and change it so I can add text and overlay new images. </p>
  
  <p>How can I do this in JS/HTML/etc? </p>