Customizing Card Overlay Settings – Hover Text, Opacity Filter, & More

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

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

Author

Posts
June 24, 2020 at 9:15 am #16882

Andres
Participant

Hi Tom,

I had some questions regarding customizing certain aspects in the Overlay 2 options in Cards.

A. How can I center the title overlay that appears on photos upon hover vertically and horizontally ?

B. Is it possible to reduce the opacity of the opacity filter in Overlay 2 that darkens the photo when the cursor is placed over a photo? For photos on the darker side, it renders them almost completely opaque.

C. Is it possible to disable the effect in Overlay 2 that causes a photo to move down about 10px when the cursor is over it?

D. Is the text on hover overlay possible on mobile? At present, the title heading is constantly present.

Here’s the link to the page with the WPSP feed for reference: wordpress-424710-1336732.cloudwaysapps.com/sample-page/

Thank you Tom, and have a good day.

Sincerely,

Andrés

June 24, 2020 at 3:13 pm #16899
Tom
Keymaster
Hi there,

All this CSS should do the trick:

a)
```
body .wpsp-card.wpsp-overlay .wpsp-content-wrap {
    grid-column: 1 / 6;
    grid-row: 3 / 6;
    text-align: center;
}
```
b)
```
body #wpsp-568 .wp-show-posts-inner:hover .wp-show-posts-image .wp-show-posts-image-overlay {
    background-color: rgba(0,0,0,0.4) !important;
}
```
c)
```
body .wpsp-overlay.wpsp-ov-style-two .wp-show-posts-inner:hover {
    -webkit-transform: translateY(0;
    transform: translateY(0);
}
```
d) It’s not really possible as hovering on mobile isn’t possible – you can either tap or not tap an element.

Hope this helps! 🙂
June 25, 2020 at 8:49 am #16924
Andres
Participant
Hi Tom,

Thanks!

Is it possible to center the title vertically? It’s now centered horizontally. What I mean by “vertically” is have the title appear half way between the top and bottom of a photo, at zero on the X axis.

After inputting the following CSS, photos still move as a hover effect. Should this CSS disable that effect?
```
.wpsp-overlay.wpsp-ov-style-two .wp-show-posts-inner:hover {
-webkit-transform: translateY(0;
transform: translateY(0);
}
```
The feed is looking great. Thank you very much.

By the way, I installed your plugin – Simple CSS – and it’s great!!

Have a good day.

Sincerely,

Andrés
June 25, 2020 at 2:23 pm #16942

Tom
Keymaster

Ah, can you try the updated CSS snippets above? They should work better now.

Let me know 🙂

June 25, 2020 at 4:59 pm #16947

Andres
Participant

Hi Tom,

That nailed if for the text!!

The images still do move when the cursor is placed over them. It’s not the end of the world. I personally find it distracting, but that’s me. I’m not a fan at all of site that have things that move around and pop up.

Thank you very much, Tom

Have a good one.

Regards,

Andrés

June 26, 2020 at 2:54 pm #16969

Tom
Keymaster

It looks like your CSS is broken which is why it’s not working. Can you share that transform related block(s) of CSS with me?

June 26, 2020 at 5:25 pm #16975

Andres
Participant

Hi Tom,

I think resolving the issue in the GP thread will resolve this one. So that it’s in this thread in case anyone else has the same issue, here is the transform-related CSS:

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

If I run this CSS without any other CSS inserted, 2 additional errors show when running a CSS test (there are 4 CSS on that category page without any additional CSS running.

Have a good night.

Andrés

June 27, 2020 at 1:00 pm #17000

Andres
Participant

Thanks Tom! Your other response resolved it.

Have a good day.

Cheers!

Andrés

June 29, 2020 at 1:53 pm #17036

Tom
Keymaster

Awesome! Thanks, you too 🙂

May 12, 2021 at 3:40 am #30161
Sergio
Participant
Hi
Just to try to contribute, the “)” sign is missing from the code.
```
.wpsp-overlay.wpsp-ov-style-two .wp-show-posts-inner:hover {
-webkit-transform: translateY(0; <------ the sign ")" is missing
transform: translateY(0);
}
```
The correct:
```
body .wpsp-overlay.wpsp-ov-style-two .wp-show-posts-inner:hover {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
```
May 12, 2021 at 10:29 pm #30184

elvin
Moderator

Nice one! thanks for helping out. 😀
Author

Posts

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

You must be logged in to reply to this topic.

[Resolved] Customizing Card Overlay Settings – Hover Text, Opacity Filter, & More