[Support request] Woocommerce product border and hover

[Atefan]

Hello, I wish I could get a border as given the link below on the products and a hover effect as the second link.

Is this possible?

Kind Regards

[David]

Hi there,

do you have a link to your Shop site so i can see what CSS would be required?

And likewise do you have any Content Boxes that are similar where you want to apply the hover effect ?

[Atefan]

Hi David, the link is below,
Content boxed would be the product page, with the products.
like here https://www.delightingideas.com/products-hover-efects/products-hover-no-shadow/

Good Day!

[David]

Just to be clear, on your newwebsite shop page you would like the Border ( rounded corners ) and the fancy Shadow Hover effect ?

[Atefan]

Yes, this would be nice David.

[David]

Try this CSS:

.woocommerce ul.products li.product {
    border-radius: 10px;
    overflow: hidden;
    padding: 10px;
}
.woocommerce ul.products li.product .button {
    border-radius: 5px;
}

.woocommerce ul.products li.product {
    box-shadow: 0px 10px 30px 0px rgba(0,0,0,0);
    transform: translate3d(0,0,0); 
    transition: all 0.2s ease-in;
}
.woocommerce ul.products li.product:hover {
    box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.3);
    transform: translate3d(0,-5px,0); 
}

May look better with a lower column count 🙂

[Atefan]

WOW, This looks very nice!
Thanks a million, David!

[David]

Glad to be of help!

[Author]

Posts