Image hover effect – WP Show Posts

Tagged: black and white, color, hover, image

This topic has 11 replies, 2 voices, and was last updated 4 years, 11 months ago by Leo.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
October 8, 2018 at 10:35 am #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

October 8, 2018 at 10:45 am #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!

October 8, 2018 at 11:47 am #6126

Leo
Moderator

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 🙂

October 10, 2018 at 1:31 pm #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

October 10, 2018 at 8:45 pm #6147
Leo
Moderator
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 🙂
October 11, 2018 at 2:21 pm #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!

October 15, 2018 at 3:39 am #6190

Eva
Participant

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

October 19, 2018 at 11:39 am #6239
Leo
Moderator
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 🙂
October 19, 2018 at 12:34 pm #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!

October 19, 2018 at 1:00 pm #6241
Leo
Moderator
That’s because your original CSS is still added:
```
img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}
```
Revmoing that should work.
October 19, 2018 at 1:31 pm #6242

Eva
Participant

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

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

October 19, 2018 at 7:04 pm #6245

Leo
Moderator

No problem 🙂
Author

Posts

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

[Resolved] Image hover effect