CODEWITHSUNDEEP
javascripthtml
Mark Allison
Mark Allison

Reputation: 7228

How to make an image larger on mouseover with Javascript?

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.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
}
.photo {
  position: absolute;
  top: 86px;
  right: 92px;
}
<div class="photo" id="photo"></div>

Upvotes: 0

Views: 6311

Answers (4)

kev
kev

Reputation: 1031

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.com/media/images/3848765-wallpaper-images-download.jpg" /></div>

Upvotes: 4

epascarello
epascarello

Reputation: 207501

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;
}

Upvotes: 1

Andy
Andy

Reputation: 3012

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.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col">       
        <img src="https://placekitten.com/g/200/200">
    </div>
    <div class="col">
      <img src="https://placekitten.com/g/200/200">
    </div>
  </div>
  <div class="row">
    <div class="col">
      <img src="https://placekitten.com/g/200/200">
    </div>
    <div class="col">
      <img src="https://placekitten.com/g/200/200">
    </div>
    <div class="col">
      <img src="https://placekitten.com/g/200/200">
    </div>
  </div>  
</div>

Upvotes: 0

Max90
Max90

Reputation: 193

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

#photo:hover{
    height: 100:
}

Upvotes: 0

Related Questions