I have an image with a headline ad text on top which should only be visible when hovering over the image. The headline as well as the image contain a link, but I can’t get the link to work for my image: when hovering over the headline, the link works, but when hovering over the image, nothing is linked. I have this fiddle.
<article>
<div class="entry-wrapper">
<header class="entry-header" >
<div class="entry-meta"><span>Text</span><h2><a href="https://www.google.com/" >Headline</a></h2>
</header>
<a href="https://www.google.com/" class="entry-thumbnail">
<img width="300" height="300" src="https://images.unsplash.com/photo-1597589827317-4c6d6e0a90bd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80" alt="" decoding="async"></a>
<div class="entry-content entry-excerpt">
</div>
</div>
</article>
html *, html ::after, html ::before{
box-sizing:border-box}
.entry-wrapper{
overflow:hidden;
height:100%
}
article .entry-wrapper .entry-header{
opacity:0;
position:absolute;
z-index:15;
width:100%;
height:100%;
padding:30px;
color:white !important
}
article .entry-wrapper:hover .entry-header{
opacity:1;
transition:.3s ease-in-out;
background-color:#6C836F;
}
article .entry-wrapper{
position:relative
}
article .entry-thumbnail:hover{
opacity:1
}
.entry-small .entry-header, .home .entry-thumbnail {
margin:0
}
article .entry-wrapper .entry-header a{
color:white !important
}
article{
width:300px;
height:300px
}
.entry-thumbnail{
display:block
}
<article>
<div class="entry-wrapper">
<header class="entry-header" >
<div class="entry-meta"><span>Text</span><h2><a href="https://www.google.com/" >Headline</a></h2>
</header>
<a href="https://www.google.com/" class="entry-thumbnail">
<img width="300" height="300" src="https://images.unsplash.com/photo-1597589827317-4c6d6e0a90bd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80" alt="" decoding="async"></a>
<div class="entry-content entry-excerpt">
</div>
</div>
</article>
html *, html ::after, html ::before{
box-sizing:border-box}
.entry-wrapper{
overflow:hidden;
height:100%
}
article .entry-wrapper .entry-header{
opacity:0;
position:absolute;
z-index:15;
width:100%;
height:100%;
padding:30px;
color:white !important
}
article .entry-wrapper:hover .entry-header{
opacity:1;
transition:.3s ease-in-out;
background-color:#6C836F;
}
article .entry-wrapper{
position:relative
}
article .entry-thumbnail:hover{
opacity:1
}
.entry-small .entry-header, .home .entry-thumbnail {
margin:0
}
article .entry-wrapper .entry-header a{
color:white !important
}
article{
width:300px;
height:300px
}
.entry-thumbnail{
display:block
}
2
Answers
well the problem is that your
heading
title comes over yourimage
that’s why you can’t click on the image or sense the link, it’s very easy to solve it, since bothheading
andimage
have the same hyper link you should give them ana
tag parent:if you can’t change the HTML use JavaScript or j-Query instead:
i gave
cursor: pointer;
to.entry-header
i think this will solve it!
How about you try modifying the CSS and keeping HTML as it is: