search

Home  >  Q&A  >  body text

How can I make the link cover the entire image?

I want the link to cover all images, not just in the center but also when you hover over the image.

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

P粉481815897P粉481815897261 days ago521

reply all(1)I'll reply

  • P粉191323236

    P粉1913232362024-04-03 18:08:52

    You can include an image within a link so that you can click anywhere on the image to access the link.

    #comehere {
      margin-top: 2000px;
    }
    
    
    here

    reply
    0
  • Cancelreply