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.

What am I doing wrong?

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 = "/" + handle;
  img.height = 32;
  img.onload = function() {
    div.appendChild(img);
  };
}

function mouseOver() {
  var img = document.getElementById("photo");
  img.height = 100;
}

function mouseOut() {
  // TODO
}

.photo {
  position: absolute;
  top: 86px;
  right: 92px;
}

<div class="photo" id="photo"></div>

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.

What am I doing wrong?

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./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
}

.photo {
  position: absolute;
  top: 86px;
  right: 92px;
}

<div class="photo" id="photo"></div>

• javascript
• html

• 2 Any reason this can't be done with CSS alone? – isherwood Commented Dec 19, 2018 at 13:53
• What will handle be? – yunzen Commented Dec 19, 2018 at 13:54

4 Answers 4

No need for JS IMHO :-)

.photo {
  position: absolute;
  top: 86px;
  right: 92px;
  transform: scale(1);
  transition: transform .5s;
}

.photo:hover {
  transform: scale(1.2);
}

<div class="photo" id="photo"><img src="https://wallpaperbrowse./media/images/3848765-wallpaper-images-download.jpg" /></div>

None of the answers so far explain why it does not work. The reason it does not work is you are setting the height of 32 on the image. But when you are setting the height, you are setting it on the div, not the image. So if you want to do it your way, you would need to select the image. querySelector will let you reference the image in the element.

function mouseOver() {
  var img = document.querySelector("#photo img");
  img.height = 100;
}

I think it would be easier and cleaner to just use css for this

#photo:hover{
    height: 100:
}

Very simple with CSS using flexbox (demo)

.col {
  display: flex;
}

.col img {
  margin: 5px 5px; /* more margin makes the image smaller */
  flex-grow: 1;
}

.col img:hover {
  margin: 0 0; /* less margin on hover makes the image bigger */
}

<link href="https://stackpath.bootstrapcdn./bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col">       
        <img src="https://placekitten./g/200/200">
    </div>
    <div class="col">
      <img src="https://placekitten./g/200/200">
    </div>
  </div>
  <div class="row">
    <div class="col">
      <img src="https://placekitten./g/200/200">
    </div>
    <div class="col">
      <img src="https://placekitten./g/200/200">
    </div>
    <div class="col">
      <img src="https://placekitten./g/200/200">
    </div>
  </div>  
</div>