Currently, the code functions as intended when you hover over or touch the thumbnail, an overlay will appear.
The issue lies in the fact that to navigate to a specific URL, you have to click directly on the text. The overlay itself is not clickable and cannot redirect you to another URL.
I attempted to adjust the placement of the <a href> tag by encompassing it within the overlay and posts, but this caused the entire code to malfunction.
I also experimented with placing the <a href> tag within the overlay div, however, this solution did not produce the desired results.
How can I make both the overlay and the text clickable so they can redirect users to a different URL?
Here is the HTML code snippet under scrutiny:
<div class="js-masonry">
<?php if( have_posts() ): while( have_posts() ): the_post();?>
<div class="item-masonry overlay">
<a href="<?php the_permalink();?>">
<div class="posts">
<p><h2>text1</h2></p>
<p><h2>Why is this text only clickable but the overlay doesn't?</h2></p>
<p><h3>text2</3></p>
</div>
<img src="#"/>
</div>
<?php endwhile; else: endif;?>
</div>
CSS
.posts {
position: absolute;
z-index: 1;
bottom: 5px;
color: white;
}
.overlay:after {
content: '';
position: absolute;
display: block;
height: calc(100% - 10px);
width: calc(100% - 10px);
top: 5px;
left: 5px;
background: rgba(0,0,0,0.6);
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.overlay:hover:after {
opacity:1;
}