Add border effect on image product - by Fernando

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

  • Avatar: Fernando
    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

    1 Answer
    Avatar: Rose Tyler
    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

  • Viewing 2 results - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.