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