skip to Main Content

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


  1. well the problem is that your heading title comes over your image that’s why you can’t click on the image or sense the link, it’s very easy to solve it, since both heading and image have the same hyper link you should give them an a tag parent:

    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">
            <a href="https://www.google.com/" class="entry-thumbnail">
              <header class="entry-header" >
                <div class="entry-meta"><span>Text</span><h2>Headline</h2></div>
              </header>
              <img width="300" height="300" src="" alt="" decoding="async"> 
            </a>
            <div class="entry-content entry-excerpt"></div>
        </div>
    </article>

    if you can’t change the HTML use JavaScript or j-Query instead:

    $(".entry-header").on("click",function(){
      window.location.href = $(".entry-thumbnail").attr("href")
    })
    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;
      cursor: pointer;/*added*/
      }
    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}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <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></div>
            </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>

    i gave cursor: pointer; to .entry-header
    i think this will solve it!

    Login or Signup to reply.
  2. How about you try modifying the CSS and keeping HTML as it is:

    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: 0.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 .entry-wrapper a {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    <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></div>
            </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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search