[Resolved] Customizing Card Overlay Settings – Hover Text, Opacity Filter, & More

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Customizing Card Overlay Settings – Hover Text, Opacity Filter, & More

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #16882
    Andres
    Participant

    Hi Tom,

    I had some questions regarding customizing certain aspects in the Overlay 2 options in Cards.

    A. How can I center the title overlay that appears on photos upon hover vertically and horizontally ?

    B. Is it possible to reduce the opacity of the opacity filter in Overlay 2 that darkens the photo when the cursor is placed over a photo? For photos on the darker side, it renders them almost completely opaque.

    C. Is it possible to disable the effect in Overlay 2 that causes a photo to move down about 10px when the cursor is over it?

    D. Is the text on hover overlay possible on mobile? At present, the title heading is constantly present.

    Here’s the link to the page with the WPSP feed for reference: wordpress-424710-1336732.cloudwaysapps.com/sample-page/

    Thank you Tom, and have a good day.

    Sincerely,

    Andrés

    #16899
    Tom
    Keymaster

    Hi there,

    All this CSS should do the trick:

    a)

    body .wpsp-card.wpsp-overlay .wpsp-content-wrap {
        grid-column: 1 / 6;
        grid-row: 3 / 6;
        text-align: center;
    }

    b)

    body #wpsp-568 .wp-show-posts-inner:hover .wp-show-posts-image .wp-show-posts-image-overlay {
        background-color: rgba(0,0,0,0.4) !important;
    }

    c)

    body .wpsp-overlay.wpsp-ov-style-two .wp-show-posts-inner:hover {
        -webkit-transform: translateY(0;
        transform: translateY(0);
    }

    d) It’s not really possible as hovering on mobile isn’t possible – you can either tap or not tap an element.

    Hope this helps! đŸ™‚

    #16924
    Andres
    Participant

    Hi Tom,

    Thanks!

    Is it possible to center the title vertically? It’s now centered horizontally. What I mean by “vertically” is have the title appear half way between the top and bottom of a photo, at zero on the X axis.

    After inputting the following CSS, photos still move as a hover effect. Should this CSS disable that effect?

    .wpsp-overlay.wpsp-ov-style-two .wp-show-posts-inner:hover {
    -webkit-transform: translateY(0;
    transform: translateY(0);
    }

    The feed is looking great. Thank you very much.

    By the way, I installed your plugin – Simple CSS – and it’s great!!

    Have a good day.

    Sincerely,

    Andrés

    #16942
    Tom
    Keymaster

    Ah, can you try the updated CSS snippets above? They should work better now.

    Let me know đŸ™‚

    #16947
    Andres
    Participant

    Hi Tom,

    That nailed if for the text!!

    The images still do move when the cursor is placed over them. It’s not the end of the world. I personally find it distracting, but that’s me. I’m not a fan at all of site that have things that move around and pop up.

    Thank you very much, Tom

    Have a good one.

    Regards,

    Andrés

    #16969
    Tom
    Keymaster

    It looks like your CSS is broken which is why it’s not working. Can you share that transform related block(s) of CSS with me?

    #16975
    Andres
    Participant

    Hi Tom,

    I think resolving the issue in the GP thread will resolve this one. So that it’s in this thread in case anyone else has the same issue, here is the transform-related CSS:

    body .wpsp-overlay.wpsp-ov-style-two .wp-show-posts-inner:hover {
    -webkit-transform: translateY(0;
    transform: translateY(0);
    }

    If I run this CSS without any other CSS inserted, 2 additional errors show when running a CSS test (there are 4 CSS on that category page without any additional CSS running.

    Have a good night.

    Andrés

    #17000
    Andres
    Participant

    Thanks Tom! Your other response resolved it.

    Have a good day.

    Cheers!

    Andrés

    #17036
    Tom
    Keymaster

    Awesome! Thanks, you too đŸ™‚

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