Change Product Category Hover Effect

[emancilla0410]

Hi, I was wondering if there is an option in the category style that displays the category title on hover. I searched in
Theme Settings → Product Archive → Categories Style but couldn’t find anything.

I want something similar to image7. I have three categories, but only the title “Ferretería” is visible due to the hover activation.

• This topic was modified 2 months, 1 week ago by emancilla0410.

Attachments:

You must be logged in to view attached files.

Hi emancilla0410,

Thanks for reaching to us and appreciate your patience.

Please provide URL of the mentioned page, so I can take a closer look.

Regards,

I want to show the title on hover for the product category section.

Hi emancilla0410,

Thanks for the link.

I can see the title are now showing. Did you resolved the issue yourself?

Regards,

No. What I want is to set the default state as hidden, and when you hover then show the title. Can you please help me?

Hi emancilla0410,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global CSS section:

/* Hide h3 by default with opacity */
.category-grid-item .wd-entities-title {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show h3 when category-grid-item is hovered */
.category-grid-item:hover .wd-entities-title {
    opacity: 1;
}

Regards,

thanks, it is working almost perfect. I need now to the background opacity to be darker. I tried but only could get what you see in the image below. I need the full box to be darker, not just the title box

Attachments:

You must be logged in to view attached files.

[emancilla0410]

I could fix it, instead of using the .wd-entities-title class I used .wd-cat-content class, but a new issue arises. When changing the browser zoom the hover effect it does not work properly, watch the video for further references.

• This reply was modified 1 month, 3 weeks ago by emancilla0410.

Attachments:

You must be logged in to view attached files.

Hi emancilla0410,

It caused by the woman image https://ibb.co/jP3pv3q3

You can edit page > select Block and add bigger z-index value https://ibb.co/v6rYpd8v > Clear browser cache and double check.

Regards,

Hi, thanks. I saw that you help me by removing the image but now the custom css is not working for the whatsapp joinchat button and I tried to add the woman image back without success, can you please help me

I was able to solve the issue. But something weird is happening with the custom JS, sometimes do not save the changes and the code is not updated

Hi emancilla0410,

You should deactivate all plugins (except Required Plugins) and then reactivate them one by one. This makes it very easy to isolate the plugin causing problems.

Regards,

[Author]

Posts