[Support request] How to add overlay effect with custom text for single page featured images

[Ralfs]

Looking for something similar to this – http://jsfiddle.net/51csqs0b/

I want to display custom text ex. “Please contact us for more images” on image as overlay when visitors hovers over image.

How can I do that with current theme?

[Leo]

Looks like its just simple HTML and CSS.

Their method should work as it is.

Let me know if you need more info.

[Ralfs]

Well, how can I implement the css then?

[Ralfs]

so it would be working for single posts featured images

[Leo]

Ah you didn’t specify that before.

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

[Ralfs]

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

[Ralfs]

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

[Leo]

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.

[jennifer]

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!

[Tom]

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;
}

[jennifer]

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

[Tom]

That would require some sort of mobile tooltip script.

[Author]

Posts