[WORDPRESS] Featured images does not link to single page

[luchid]

Hi, I am trying to build my portfolio and I need to put over Featured Images some text but when the text is displayed, the featured images does not link to single page anymore. Please, is there a way to fix this?Thank you very much!

[Paulie_D]

We’d need to see it in action. The PHP is of no use to us.

We need the HTML & CSS…could you put the output into a reduced case in codepen?

However, what I think you are after is: `pointer-events:none`

http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/

[luchid]

Hello, I replaced the code in my discussion. Sorry about that.

[Paulie_D]

That’s way too much to wade through, hence the request for a Codepen.

[luchid]

Thank you very much, Paulie_D, it works now with pointer-events:none. This is great!

Thanks again!

[luchid]

Hello, this is my code.
I understand that the click does not work in WordPress because of the overlay I used but I have small experience in coding and I do not know how to change the code to make the click work. Thank you very much!

My Portfolio

Client Name

Client Name

Category

Illustration

Client Name

Client Name

Category

Print

Client Name

Client Name

Category

Logo

Client Name

Client Name

Category

Web

[chrisburton]

Might this be caused by absolute positioning? Try setting a z-index.

Although, adding the above code in codepen, it seems to be linking.

[luchid]

Thank you, I will try it.
The problem is when transferring the code into WordPress. I need to use Featured Images and because the overlay the image does not link anymore to single post.

[chrisburton]

Well, it would be best if you posted exactly what WordPress outputs instead of changing the href to have a `#` value. If that’s what you’re getting, your PHP is the cause. Otherwise setting a z-index sounds like the answer here but post back with your findings, including the code WordPress is outputting.

[luchid]

In order to allow click under the overlay, I added a class to the image link and gave this style:
> .image link {display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; text-indent: -9999px; }

Also, to the image itself and to the .work figure:hover dl I added display: block.
Though I think I complicated myself, it works.
Thanks for helping me figure out.

[Author]

Posts