图像上带有锚标记的悬停效果不起作用

Question

我想要this effect 作为我的图片。

我实现了它，但我在图的位置有锚点，当我将鼠标悬停在图像上时，我应该能够点击它并且它应该重定向。我们会实现它吗？

悬停效果我使用以下代码：

.tint {
  position: relative;
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
  cursor: pointer;
  box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
}

.tint:before {
  content: "";
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: none;
  transition: all .3s linear;
}

.tint:hover:before { background: rgba(0,0,255, 0.5); }

如果我删除position:absolute，链接开始工作，但悬停效果消失了。

如果有人对此有任何解决方案，请帮助我。

提前致谢。

Answer 1

你可以根据这段代码的含义尝试一下：

<div>
<img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4">
<div class="mask">
</div>
</div>


<style>
    .mask {  position: absolute;
      height: 100%;
      width: 100%;
      transition: all 0.6s ease;
      left: 0;
      top: 0;
      background-color: #0af;
      opacity: 0;
    }
    .mask:hover {
      background-color: #0af;
      opacity: 0.3;
    }
</style>