Как отобразить ссылку поверх изображения при наведении курсора мыши, одновременно уменьшая непрозрачность изображения?

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;
}

Answer 1

Это должно делать то, что вы хотите, и в то же время это более простой подход.

.image-container {
  width: 240px;
  height: 160px;
  position: relative;
}

.image,
.link-container {
  transition: opacity 0.3s ease;
}

.link-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}

.link {
  display: block;
  background-color: rgba(0,0,0,0.8);
  color: #fff;
  padding: 8px;
}

.image-container:hover .link-container {
  opacity: 1;
}

.image-container:hover .image {
  opacity: 0.4;
}

<div class="image-container fade">
  <img class="image" src="https://placekitten.com/240/160" alt="">
  <div class="link-container">
    <a class="link" href="#">Shop Processors</a>
  </div>
</div>

Мы помещаем .link-container поверх изображения с помощью opacity: 0 и position: absolute и растягиваем его во все стороны, чтобы оно охватывало все изображение.

Затем внутри этого контейнера мы включаем нашу ссылку. Контейнер имеет display: flex и два свойства, которые центрируют ссылку по горизонтали и вертикали внутри него.

Наконец, мы добавляем переходы как к контейнеру ссылки, так и к изображению, и запускаем обе прозрачности с помощью .image-container:hover