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

Question

我想让我的图片有这个效果。

我实现了它，但我有锚在图形的地方，当我悬停在图像上，我应该能够点击它，它应该重定向。我们能实现吗?

我使用下面的代码为悬停效果:

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