Background title on hover

This topic has 19 replies, 2 voices, and was last updated 4 years ago by Tom.

Viewing 15 posts - 1 through 15 (of 20 total)

1 2 →

Author

Posts
August 12, 2019 at 1:44 pm #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

August 12, 2019 at 5:11 pm #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?

August 13, 2019 at 12:03 am #10758

Eva
Participant

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

August 13, 2019 at 5:22 pm #10764
Tom
Keymaster
What if you add this?:
```
#wpsp-3458.wpsp-card .wp-show-posts-inner:hover .wpsp-content-wrap {
    background: #fff;
    height: 100%;
}
```
August 14, 2019 at 12:47 pm #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

August 14, 2019 at 5:09 pm #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);
}
```
August 15, 2019 at 1:13 pm #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!

August 16, 2019 at 3:17 pm #10791

Tom
Keymaster

What if you remove your WPSP-related custom CSS?

August 18, 2019 at 3:45 am #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

August 18, 2019 at 11:01 am #10824

Eva
Participant

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

August 19, 2019 at 4:53 pm #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?

August 20, 2019 at 3:18 am #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!

August 21, 2019 at 4:40 pm #10848

Tom
Keymaster

This code should do exactly that: https://wpshowposts.com/support/topic/background-title-on-hover/#post-10776

August 22, 2019 at 5:57 am #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

August 22, 2019 at 8:53 pm #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;
}
```
Author

Posts

Viewing 15 posts - 1 through 15 (of 20 total)

1 2 →

You must be logged in to reply to this topic.

[Resolved] Background title on hover