How do you link an image to another page? - html

Question

I have a div, and within it is an image that should work as a link to another page. There is some text laid over it. located here https://wearehomefolks.com/index.php/home/
I have taken this from somewhere else on the web, I may have modified it a little.
I just want the image to link out to the other internal pages. And keep the hover effect.
When I hover over the images of which there are 5, there is no linking action. What is going wrong here please?
<div class="hvrbox">
<a href="https://wearehomefolks.com/index.php/product-category/home-collection/">
<img src="https://wearehomefolks.com/wp-content/uploads/2021/07/Homefolks_Instruments_brass_edition_homefolks_homepage.jpg" alt="Mountains" class="hvrbox-layer_bottom">
</a>
<div class="hvrbox-layer_top">
<div class="hvrbox-text">HOME COLLECTION
</div>
</div>
</div>
css:
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
/*display: inline-block;*/
overflow: hidden;
max-width: 100%;
height: auto;
}
.hvrbox img {
max-width: 100%;
width:100%;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
width: 100%;
}
.hvrbox .hvrbox-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
color: #fff;
/*padding: 15px;*/
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-size: 4rem;
display: inline-block;
position: absolute;
line-height:4.5rem;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
Thanks

Answer 1

You should add pointer-events: none to the overlay (i.e. the CSS rule for .hvrbox .hvrbox-layer_top). That way the click can "go through it" to the linked image to trigger the link:
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
/*display: inline-block;*/
overflow: hidden;
max-width: 100%;
height: auto;
}
.hvrbox img {
max-width: 100%;
width:100%;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
width: 100%;
}
.hvrbox .hvrbox-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
color: #fff;
/*padding: 15px;*/
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
pointer-events:none;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-size: 4rem;
display: inline-block;
position: absolute;
line-height:4.5rem;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
<div class="hvrbox">
<a href="https://wearehomefolks.com/index.php/product-category/home-collection/">
<img src="https://wearehomefolks.com/wp-content/uploads/2021/07/Homefolks_Instruments_brass_edition_homefolks_homepage.jpg" alt="Mountains" class="hvrbox-layer_bottom">
</a>
<div class="hvrbox-layer_top">
<div class="hvrbox-text">HOME COLLECTION
</div>
</div>
</div>