[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

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.