Grow your CSS skills. Land your dream job.

[WORDPRESS] Featured images does not link to single page

  • # June 10, 2013 at 8:06 am

    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!

    # June 10, 2013 at 8:08 am

    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/

    # June 10, 2013 at 8:22 am

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

    # June 10, 2013 at 8:23 am

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

    # June 10, 2013 at 8:33 am

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

    Thanks again!

    # June 10, 2013 at 1:58 pm

    That won’t work on any IE versions it seems, nor Opera. I’d avoid using that as a solution, there are other ways to achieve the same end result. But you will need to show us your work in progress to be able to help you.

    # June 11, 2013 at 5:04 am

    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!

    < !doctype html>





    # June 11, 2013 at 5:17 am

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

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

    # June 11, 2013 at 5:25 am

    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.

    # June 11, 2013 at 5:32 am

    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.

    # June 12, 2013 at 8:20 am

    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.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".