Html - Hover effect for image with text on top

Kt7789
September 18, 2023
107 views
0 votes
2 Answers

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
}

Tags: css html

Answers

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!

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>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Hover effect for image with text on top

Answers