[Solved] How to display an chage photo option on mouse hover similar to linkedin using Javascript? [closed]


If I understand what you need.. You don’t need JavaScript, only css.

.wrapper {
  position:relative;  
  display:inline-block;
}

.file-wrapper {
  opacity:0;
  transition:all .3s ease;
  position:absolute;
  bottom:0;
  left:50%;
  text-align:center;
  transform:translateX(-50%);
}

.wrapper:hover .file-wrapper {
    opacity:1;
}

input {
  opacity: 0;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.button {
  background:#000;
  color:#fff;
  border-radius:5px;
  padding:10px;
}
<div class="wrapper">
  <img src="data:image/png;base64,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" /> 
  <div class="file-wrapper">
    <input type="file" />
    <div class="button">Change picture</div>
  </div>
</div>

solved How to display an chage photo option on mouse hover similar to linkedin using Javascript? [closed]