如何在鼠标移动时在图片上方显示链接，同时降低图片的不透明度？

Question

我有一个宽度为1260，高度为709的图片。我想将不透明度设置为0.4，并在鼠标悬停时，在图像的中心出现一个可点击的链接，最好是当用户悬停在图像中心时（像素坐标420, 230, 850, 510）。我可以创建一个叠加来满足不透明度的要求。并且使用地图，我可以让坐标链接到另一个页面。但我不知道如何同时满足这两个条件。为了尽可能的清楚，我想让图像坐标（或者仅仅是图像的中心）与悬停时出现的文本链接，同时图像整体的不透明度也降低到0.4。这是我目前的工作。

html

<div class="image-container fade" data-text="Shop Processors">
            <img src="images/shop/cpu.png" alt="" usemap="#processorMap">
            <map name="processorMap">
                <area shape="rect" coords="420, 230, 850, 510" href="index.html" alt="">
            </map>
</div>

CSS

main 
    text-align: center;


.image-container 
  height: 709px;
  width: 1260px;
  position: relative;
  text-align: center;


.fade::after 
    content: attr(data-text);
    color: white;
    font-size: 40px;
    background: black;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    white-space: pre-wrap;


.fade:hover::after 
    opacity: 0.8;