How to add overlay effect with custom text for single page featured images

Looks like its just simple HTML and CSS.

Their method should work as it is.

Let me know if you need more info.

Well, how can I implement the css then?

so it would be working for single posts featured images

Ah you didn't specify that before.

Try changing .image to .page-header-image-single in the CSS and keep everything else the same.

And what about "data-content=" tag? Where I should add it?

Hmm, still cannot get it working. Maybe you can suggest some other method of how to add simple overlay text on img hover?

Hmm featured image could be tricky. See Tom's explanation here: https://generatepress.com/forums/topic/caption-for-post-thumbnails/#post-86468

One thing you can try is to add the image at the top of your content as a static image then use the More tag: https://docs.generatepress.com/article/using-the-more-tag/

Then you can use the method above exactly how it is.

I got this to work on my website, but I'm unsure how to implement it for mobile and tablet (touch screen).

Here is my website: overflowtucson.org

Any ideas? Thanks in advance!

Touch events are pretty difficult when it comes to stuff like this.

You can try replacing:

.image:hover:after, .image:hover:before {
    opacity:1;
}

With:

.image:hover:after, 
.image:hover:before,
.image:focus:after,
.image:focus:before,
.image:active:after,
.image:active:before {
    opacity:1;
}

Hmmm...or maybe a way for an indicator to come up on mobile and tablet to click and see the overlay text?

That would require some sort of mobile tooltip script.