title: How to make an image larger on mouseover with Javascript?
body: <p>I want to make an image larger when the mouse is moved over it, and return it to normal after. The image loads at normal size fine using the getPhoto function in my JavaScript, but when I mouse over it, nothing happens.</p>
  
  <p>What am I doing wrong?</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>document.getElementById("photo").onmouseover = function() {
    mouseOver()
  };
  document.getElementById("photo").onmouseout = function() {
    mouseOut()
  };
  
  function getPhoto(handle) {
    var img = new Image();
    var div = document.getElementById("photo");
    while (div.firstChild) {
      div.removeChild(div.firstChild);
    }
    img.src = "https://res.cloudinary.com/harmhxmnk/image/upload/" + handle;
    img.height = 32;
    img.onload = function() {
      div.appendChild(img);
    };
  }
  
  function mouseOver() {
    var img = document.getElementById("photo");
    img.height = 100;
  }
  
  function mouseOut() {
    // TODO
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.photo {
    position: absolute;
    top: 86px;
    right: 92px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="photo" id="photo"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>