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

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

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

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #383747
    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?

    #383934
    Leo
    Staff
    Customer Support

    Looks like its just simple HTML and CSS.

    Their method should work as it is.

    Let me know if you need more info.

    #383949
    Ralfs

    Well, how can I implement the css then?

    #383952
    Ralfs

    so it would be working for single posts featured images

    #383958
    Leo
    Staff
    Customer Support

    Ah you didn’t specify that before.

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

    #383965
    Ralfs

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

    #383970
    Ralfs

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

    #383991
    Leo
    Staff
    Customer Support

    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.

    #385381
    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!

    #385453
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #385457
    jennifer

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

    #385719
    Tom
    Lead Developer
    Lead Developer

    That would require some sort of mobile tooltip script.

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.