Link only available for top half of image

The web script I’m using has a header image.I’m trying to make the image into a link like so:

<div class="pt_featured_video">
<div class="thumbnail_holder">
<a href=""><img src="/images/header.png"></a>

However, only the top half of the image appears to be clickable.
Maybe it has to do with the script’s css. I searched "thumbnail_holder’, in the style.css file and I see this:

.pt_featured_video .thumbnail_holder 
position: relative; 
display: flex; 
width: 100%; 
height: 0; 
box-sizing: border-box; 
overflow: hidden; 
min-height: 500px; 
max-height: 500px; 

.pt_featured_video .thumbnail_holder img 
width: 100%; 
height: auto; 
position: absolute; 
top: 50%; 
right: 0; 
bottom: 0; 
left: 50%; 
display: block; 
margin: 0; 
opacity: 1; 
transform: translate(-50%, -50%); 
max-width: 100%; 
border-radius: 2px; 
min-width: 100%; 
min-height: 100%; 
transition: transform 0.5s ease; 

.pt_featured_video .thumbnail_holder:after 
content: ""; 
position: absolute; 
right: 0; 
bottom: 0; 
width: 100%; 
height: 70%; 
opacity: .8; 
background-image: linear-gradient(180deg, transparent, #000); 
transition: opacity .4s; 

Would anything in the css prevent the full image from being clickable?
Or can you provide another solution/idea

Try placing the a tag outside of all the divs.

Thanks, I did try that with no same result.
Any additional ideas are appreciated

It seems the image is partly (70%) covered by the “after” pseudo element.

Try raise the img above by a z-index:1; or change the “after” element to a “before” element to make it stacked under the image.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.