Product grid: Remove shadow + padding on hover

Hello,

I have selected the product style named “Full width button”.

This style adds a hover effect with a shadow and also adds some padding to the bottom. Can’t seem to find a way to disable it.

Could you please explain to remove this effect on hover?

Attachments:

You must be logged in to view attached files.

Hello,

Define the code below in Theme Settings -> Custom CSS:

.product-grid-item.wd-hover-with-fade.hover-ready:is(:hover,.state-hover) .content-product-imagin {
    opacity: 0;
    visibility: hidden;
    transform: none;
}

.product-grid-item.wd-hover-with-fade.hover-ready:is(:hover,.state-hover) .fade-in-block {
    opacity: 0;
    visibility: hidden;
}

Clear the cache and recheck the issue.

Kind Regards

Thank you, the shadow is gone!

But the padding is still visible on hover. It makes it look like the product tile jums up a little bit.

Could you please update the code?

Hello,

Please add the following code below for help:

.product-grid-item.wd-hover-with-fade.hover-ready:is(:hover,.state-hover) .product-wrapper {
    transform: none;
}

Kind Regards

Thank you, works perfectly 🙂

Hello,

You are welcome! If you do not mind, can you please leave a 5 stars rating for our theme by going here: http://themeforest.net/downloads It will allow us to release more updates and provide dedicated support in the future. It would encourage our work a lot.

Have a good day!

Kind Regards

[Author]

Posts