如何使連結覆蓋整個圖像？

Question

我希望連結覆蓋所有圖像，不僅是在中心，而且當您將滑鼠懸停在圖像上時。

.moduledata{
  position: relative;
  width: auto;
  margin: 0px !important;
  max-width: 380px;
}
.moduledata > h5 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.moduledata > h5 > a {
  color: #000000;
  font-weight: 300;
  font-size: 38px;
}
.moduledata:hover h5 {
  visibility: visible;
}
.moduledata h5 {
  visibility: hidden;
}

<div class="moduledata">
  <h5><a href="{{seourl}}">{{title}}</a></h5>
  <figure><img src="{{pageThumb}}"/></figure>
</div>

Answer 1

您可以將圖像包含在連結內，這樣您就可以點擊圖像上的任意位置來存取該連結。

#comehere {
  margin-top: 2000px;
}

<a href="#comehere"><img src="https://via.placeholder.com/150x150" alt=""></a>
<div id="comehere">here</div>