Return to previous page

Add border effect on image product - by Fernando

This topic has 2 replies, 2 voices, and was last updated 3 years, 8 months ago ago by Rose Tyler

Fernando

Participant

June 10, 2021 at 11:34

Hello,

Cant find the css relative to image product hover. I wanted to add a border effect, like i have in the button below of image.

button

like that, when hover on image

the css i have in the buttton

.content-product .button:hover{-webkit-box-shadow: 2px 2px 25px 6px #FF3232; box-shadow: 2px 2px 25px 6px #FF3232; background: linear-gradient(
135deg
, #FFADAD 40%, #B22323 50%, #7C1818 60%);}

.content-product et-element-active{-webkit-box-shadow: 2px 2px 25px 6px #FF3232; box-shadow: 2px 2px 25px 6px #FF3232; background: linear-gradient(
135deg
, #FFADAD 40%, #B22323 50%, #7C1818 60%);}

THanks a lot for the help

#290498 Copied Theme version: 7.2.10 WooCommerce version: 5.3

1 Answer

Rose Tyler

Support staff

June 10, 2021 at 12:32

Hello,

Try to use this custom CSS code:

.content-product .product-content-image:hover {
    -webkit-box-shadow: 2px 2px 15px 6px #FF3232;
    box-shadow: 2px 2px 15px 6px #FF3232;
    background: linear-gradient( 135deg , #FFADAD 40%, #B22323 50%, #7C1818 60%);
}
.content-product .product-image-wrapper,
.content-product .image-swap {
    padding:20px;
    margin-bottom: 0;
}
.product-details {
    padding: 0 20px;
}
.content-product {
    margin-left: -15px;
    margin-right: -15px;
}
.single-product .products-loop .outofstock .out-of-stock + .product-content-image {
    pointer-events: inherit;
}

Regards

#290512 Copied