black line when hovering over a picture

Question

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 class="col-md-12 col-lg-6 text-center mb-3">
  <img src="#" alt="" class="block" id="block2" onmouseover="actionWhenMouseOver(this.id)" onmouseout="actionWhenMouseOut(this.id)">
</div>

Why pass the ID, then use `getElementById` to find the element based on the ID? Why not pass the element directly? Inline event handlers like `onmouseover` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. Then, the `Event` argument’s `target` property can be used instead. Anyway, this sounds like a browser rendering issue. — Sebastian Simon, Dec 19 '21 at 20:21
It looks like the problem is in the parent container. The code you sent [works just fine](https://stackblitz.com/edit/web-platform-ujyimw?file=index.html). Can you provide more code around the image? — Otrozone, Dec 19 '21 at 21:37

Dhiogo Boza · Accepted Answer · 2021-12-19T21:46:33.627

0

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 class="col-md-12 col-lg-6 text-center mb-3">
  <img src="#" alt="" class="block" id="block2">
</div>

edited Dec 19 '21 at 21:46

answered Dec 19 '21 at 20:55

Dhiogo Boza

310
2
9

black line when hovering over a picture

1 Answers1