JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
        <img class="image1" src="https://placehold.it/100" id="instrument"/>
        <a id="edit" href="#" class="image2 hide"><img src="https://cdn.pixabay.com/photo/2017/06/06/00/33/edit-icon-2375785_960_720.png"/></a>
    </div>

CSS

.parent {
  position: relative;
  margin-left:40%;
  background: green;
}
.image1 {
  position: absolute;
  top: 0;
  left: 0;

}
.image2 {
  position: absolute;
  top: 0px;
}

.image2 img{
    max-width:20px;
}

.hide{
    visibility: hidden;
    display: block;
}

JavaScript

var inst = document.getElementById("instrument");
inst.addEventListener("mouseover", function(){toggleEdit(true);})
inst.addEventListener("mouseleave", function(){toggleEdit(false);})
var edit = document.getElementById("edit");
var i = 0;
function toggleEdit(isShow){
    console.log(i++);
    edit.className = edit.className.replace(" hide", "");
    
    if (!isShow){        
        edit.className += " hide";
    }
}