Overlay Post Title on Thumbnails

Hi there,

Is there a specific page where I can see what you've set up so far? I took a look around but couldn't find anything.

Let me know :)

Sorry for the confusion I haven't added any actual CSS yet was just trying it in the inspector. It's the main routes page and routes on the homepage I want to apply it to, basically every archive with thumbnails.

You could try:

1. Remove the 36px padding from the bottom of the posts.
2. Add this CSS:

.blog .generate-columns .entry-header {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    left: 0;
}

Hi Tom,

Many thanks for this, it's almost working but the titles are displaying slightly lower than central. I've added the CSS to my staging site so you can see it in action, I've edited the URL of this post with the new one. Also the star ratings aren't clickable. They way I'm adding them is with a Generatepress Hook Element where I add the shortcode [yasr_overall_rating size="medium"] to the after_entry_title Hook.

Is there some way I can wrap that within the post URL dynamically?

Also, would like to add a dark overlay to the image so that the titles are easier to read. I know I could just use filter: brightness(0.7); but I'm not sure legacy browser support is that good for filters so was wondering if there's a better way?.

Many Thanks.

Andy

Hi there,

the staging site needs a login - can you disable that or send them via the Account issue form:

https://generatepress.com/contact/

Please add the URL of this topic to the form so we can track.

Sorry I tried to add the login details with the URL but I think they got mixed up. I've now sent the details via the form, had to tick 'not a support query', even though it is.

Strange, can you un-do the change so I can see the stars as click-able? Even when I remove the code from developer tools I can't click on them.

Sorry I realise now they never were clickable before, but now they are overlaid on the image I think its even more important that they are clickable, if possible.

Where are they coming from? A plugin?

Yes this one: https://wordpress.org/support/plugin/yet-another-stars-rating/

Then I add them using the shortcode [yasr_overall_rating size=”medium”] inside the Element Hook

You might want to check with them why it's not working as of right now, then we can quite easily adjust the top value in your CSS to bring it up a bit if it isn't perfectly center.

Think I may have confused you slightly here. The YASR plugin is working fine, the stars aren't meant to be clickable by default, I just want to make the whole thumbnail clickable including the stars.

In your CSS try including a pointer-events: none; property ie.

.blog .generate-columns .entry-header,
.archive .generate-columns .entry-header,
.wp-show-posts-entry-header {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    left: 0;
    pointer-events: none;
}

Then it should inly detect the image and its link.

Wow thanks David, what a brilliantly simple solution, would never have thought of that!.

Could you advise me on the best way to add a dark transparent overlay to the thumbnails so the text is easier to read?. I know I could use CSS filters, but is there a better way that would support legacy browsers?

Also, on the WP Show Post thumbnails the post titles/stars are perfectly centered, but on theme generated archive pages they are slightly too low, shall I just tweak the top and transform numbers slightly for those?.