title: How to change image source on hover using javascript, but applies to each individual photo
body: <p>I would like to change the image source of each image when it is hovered. I will have the original url that exists before the hover (represented by yes.png), and the new url that exists after the hover (represented by yes2.png). The whole point is that the new url is the same as the original except a 2 is added to it on hover. And I would like this done in javascript. I'm new at javascript, but how do I add onto this?</p>
  
  <p>The whole thing that makes this different is that the source of the image is different for each image, yet it works for every image.</p>
  
  <pre><code>var url = getElementsByClassName ('card-img-top').src
  var newImg = url+2
  </code></pre>