html - How to make hover effect work on part of an image

Question

I’m trying to make a hover image appear over an image but only when I hover over a certain area of the image, can’t seem to get an area map to fit into the code I already have. Help would be much appreciated.

.overlay-image .hover {
  position: relative;
  left: 1084;
  height: 2;
  width: 3;
  transform: rotate(341deg);
  opacity: 3;
  transition: .8s ease;
}

.maine .hover {
  position: absolute;
  width: 125;
  height: 150;
  top: 58;
  left: 1084;
}

.overlay-image .hover {
  position: absolute;
  top: 58;
  height: 2px;
  width: 3px;
  opacity: 0;
  transition: .8s ease;
}


/* New overlay appearance on hover */

.overlay-image:hover .hover {
  opacity: 1;
}

<div class="overlay-image">
  <a href="LINK_URL">
    <img class="image" src="https://i.imgur.com/bn03Ndw.png" alt="Alt text" />
    <div class="normal">
      <div class="text">Image + text ORIGINAL
      </div>
    </div>
    <div class="hover" align="1084,58">
      <img class="image" src="https://i.imgur.com/lN2UnH2.png" alt="Alt text hover" width="125" height="150" />
      <div class="text"></div>
    </div>
  </a>
</div>

question from:https://stackoverflow.com/questions/65906565/how-to-make-hover-effect-work-on-part-of-an-image

Answer 1

Using a div container:

https://jsfiddle.net/9cgorq1z/4/

.image.show {
  opacity: 0;
}

.cotainer-hover {
  background: red;
  width: 150px;
  height: 150px;
  position: absolute;
  opacity: .2;
}

.cotainer-hover:hover ~ .image.show {
   opacity: 1;
}

<div class="cotainer-hover"></div>
<img class="image original" src="https://i.imgur.com/bn03Ndw.png" width="300"/>
<img class="image show" src="https://i.imgur.com/lN2UnH2.png" width="125"/>