black line when hovering over a picture-CodePudding

I needed to add an enlargement of the image on hover. It is implemented through the js function, which gives the picture the property transforms: scale(1.2). But at the beginning of the animation, a black line appears at the bottom of the picture, and this does not depend on the picture. In href there is a local saved picture, so I put # instead of a link to make code runnable enter image description here

function actionWhenMouseOver(imgName) {
  var img = document.getElementById(imgName);
  img.style['transform'] = "scale(1.2)";
  img.style['transition'] = "0.3s";
}

function actionWhenMouseOut(imgName) {
  var img = document.getElementById(imgName);
  img.style['transform'] = "scale(1)";
  img.style['transition'] = "0.3s";
}

<div >
  <img src="#" alt=""  id="block2" onm ouseover="actionWhenMouseOver(this.id)" onm ouseout="actionWhenMouseOut(this.id)">
</div>

CodePudding user response：

Try only with CSS. For example, you can set up the class block that you used to scale the image on hover. It is a better approach and maybe this black line does not appear more.

.block {
  transform: scale(1);
  transition: 0.3s;
}

.block:hover {
  transform: scale(1.3);
}

<div >
  <img src="#" alt=""  id="block2">
</div>