Black Friday sale! Get 25% off WPSP Pro! Discount automatically applied at checkout.

[Resolved] Image hover effect

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Image hover effect

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #6123
    Eva
    Participant

    Hi Tom,
    I am using WSPP on various web sites, and really think it’s great. For one site I am using the Grayscale image hover effect. Now my client wants it the other way around: a B/W image that lights up colored on hover. Would that be possible, or do I have to make all featured image B/W in order to get this effect?
    Thank you!
    Eva

    #6124
    Eva
    Participant

    I just found out that this css works 🙂
    img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    }

    img:hover {
    filter: none;
    -webkit-filter: grayscale(0);
    }

    The only thing is that it turns ALL images to B/W, as opposed to just the features images of the (custom) post types I am using. Any additional CSS?
    Thanks!

    #6126
    Leo
    Participant

    Hi there,

    Link me to this specific page you are referring to as well when you send in the site link as per the other post 🙂

    #6143
    Eva
    Participant

    Hi Leo,
    This one you can just access here: https://test.alfabetprodukties.nl. For the other one I have send a message.
    Thank you!
    Eva

    #6147
    Leo
    Participant

    Little confused which page you wanted this hover effect but try this:

    .wp-show-posts-image .wp-post-image img {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
    }
    
    .wp-show-posts-image .wp-post-image img:hover {
        filter: none;
        -webkit-filter: grayscale(0);
    }

    Let me know 🙂

    #6161
    Eva
    Participant

    Just on the Homepage, the one with just images. I managed to make all images b/w with colored hover using:
    img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    }

    img:hover {
    filter: none;
    -webkit-filter: grayscale(0);
    }

    I changed it to the CSS you send me, but unfortunately that didn’t work…

    What I would like is to have this hover effect only on the Homepage, but I have no idea if that’s possible….
    Thanks again!

    #6190
    Eva
    Participant

    Hi Leo and/or Tom,
    Did you see my previous message? Do you think it’s possible?
    Thank you,
    Eva

    #6239
    Leo
    Participant

    Sorry for the late reply!

    Can you try this instead?

    .home .wp-show-posts-image img {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
    }
    
    .home .wp-show-posts-image img:hover {
        filter: none;
        -webkit-filter: grayscale(0);
    }

    Let me know 🙂

    #6240
    Eva
    Participant

    Hi Leo,
    Thanks! Well, it works on the HOME, but all pics on the rest of the site are B/W now, no hover, just B/W…
    Maybe you can take a look.

    Thanks!

    #6241
    Leo
    Participant

    That’s because your original CSS is still added:

    img {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
    }

    Revmoing that should work.

    #6242
    Eva
    Participant

    Oops, stupid 🙂
    I removed it… and yessss!!

    Thanks for the great support, as always!
    Have a good weekend,
    Eva

    #6245
    Leo
    Participant

    No problem 🙂

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