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>
You can include an image within a link so that you can click anywhere on the image to access the link.