[Resolved] Background title on hover

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Background title on hover

This topic contains 19 replies, has 2 voices, and was last updated by  Tom 1 month, 2 weeks ago.

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #10745

    Eva
    Participant

    Hi,
    I have switched to WPSP 1.0 beta2, and an adjustment I made before (with your help 🙂 won’t work anymore…
    I would like to show the posts on the homepage with title on hover, with a white background. I am using Cards Overlay and this css
    #wpsp-3458 .wp-show-posts-image:hover + .wp-show-posts-entry-header {
    background: #fff;
    }
    you send me before, but it just doesn’t work anymore. Anything I can do?
    I can change it to Cards Overlay Style 2, but without the effect. Would that be possible?

    Link to test site: https://test.alfabetprodukties.nl/

    Thank you!
    Eva

    #10752

    Tom
    Keymaster

    Hi Eva,

    It doesn’t look like the title is set to show. Can you make sure it’s enabled in the list settings?

    #10758

    Eva
    Participant

    I’am sorry Tom, so stupid…
    It’s set to show now.

    #10764

    Tom
    Keymaster

    What if you add this?:

    #wpsp-3458.wpsp-card .wp-show-posts-inner:hover .wpsp-content-wrap {
        background: #fff;
        height: 100%;
    }
    #10774

    Eva
    Participant

    Hi Tom,
    No, unfortunately this doesn’t work, this makes the whole image white…
    Actually, the Cards Overlay Style 2 would be perfect. Would it be possible to remove the ‘moving’ effect?
    Thank you!
    Eva

    #10776

    Tom
    Keymaster

    For sure, you just need to add this CSS:

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

    Eva
    Participant

    I really like the Overlay Style 2 but the CSS doesn’t seem to work… I am using this CSS for the posst:
    .home .wp-show-posts-image img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(80%);
    }

    .home .wp-show-posts-image img:hover {
    filter: none;
    -webkit-filter: grayscale(0);
    }
    .wpsp-overlay.wpsp-ov-style-two .wp-show-posts-inner:hover {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    }

    I hope you can figure it out 🙂
    Thanks!

    #10791

    Tom
    Keymaster

    What if you remove your WPSP-related custom CSS?

    #10807

    Eva
    Participant

    Hi Tom,
    I tried, but it didn’t work… My client really likes the b/w turning to color overlay. Then, on hover we would like the title to appear. If I need to use another card to make this happen, I can do that, just the easiest way 🙂

    Thank you!
    Eva

    #10824

    Eva
    Participant

    PS Like it looks here on mouse over: https://www.terstal.com/ would be ok too…

    #10827

    Tom
    Keymaster

    So right now I’m seeing the B/W turning to color, and the title displaying on overlay.

    What else are you trying to do to it exactly?

    #10830

    Eva
    Participant

    The only thing I would like is to keep the images from moving down and up on hover. If that’s possible…perfect 🙂
    Thank you, Tom!

    #10848

    Tom
    Keymaster
    #10855

    Eva
    Participant

    Hi Tom, I have tried this code before, but it doesn’t work… the images keep moving. Is there another way?
    Sorry to bother you again.

    Thank you!
    Eva

    #10866

    Tom
    Keymaster

    Can you try this?:

    .wpsp-overlay.wpsp-ov-style-two .wp-show-posts-inner:hover {
        -webkit-transform: translateY(0) !important;
        transform: translateY(0) !important;
    }
Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.