如何使悬停效果在图像的一部分上工作

Question

我试图使悬停图像出现在图像上，但只有当我悬停在图像的某个区域时，似乎无法得到一个区域地图，以适应我已经拥有的代码。非常感谢你的帮助。

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

Answer 1

.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"/>