#126806 Hover effects on product carousel

Landing Forums JupiterX WordPress Theme Hover effects on product carousel

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • Jennifer

    Hello,

    I can’t seem to get any hover effects working within the product carousel here: https://testportal.bpsassessment.com/

    I would like a slight drop-shadow when hovering over each product, and also a button colour change when hovering over the button specifically.

    Please can you help?

     

    Thanks,

    Jen

    Tatyana Hutsol Support Team

    Hello,

     

    To change the button color on hover, add this code in Jupiter X > Theme Styles > Additional CSS:

    .elementor-widget-jet-woo-products .jet-woo-products .jet-woo-product-button:hover .button {
    background-color: black !important;
    color: white !important;
    }

    Change color values to yours.

    As for the shadow, add this css code:

    .jet-woo-products.jet-equal-cols .jet-woo-products__item:hover .jet-woo-products__inner-box:after {
    content: '';
    z-index: 10;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    }

    and let me know if that’s the result you wanted to achieve.

    If it’s not, please show some example.

     

    Thank you.

    Regards.

    Jennifer

    Hi Tatyana,

    The shadow CSS looks more like an overlay. I was hoping for a soft drop shadow behind the product boxes.

    The other CSS works great, thank you.

     

    Nodari Support Team

    Hi Jennifer

    Please try this code and let me know if you like it, its a box shadow effect when you hover on carousel elements:

    .jet-woo-products .jet-woo-products__item {
        margin: 0px 10px 10px 10px;
        padding: 0px !important;
    }
    
    .jet-woo-products.jet-equal-cols .jet-woo-products__item:hover {
        box-shadow: 5px 2px 19px 2px #c4c4c4;
    }

    WIth best regards Noda

    • This reply was modified 2 months, 3 weeks ago by Nodari.
    Jennifer

    Perfect! Thanks so much!

    Alexander Hutsol Support Team

    Hello,

     

    You’re welcome.

    Regards.

    Jennifer

    Hi Alexander,

    The padding seems to have thrown off the spacing on the page, please see attached. Can you let me know the best way to fix this please?

    Thanks

    Nodari Support Team

    Hi Jennifer

    Try this code to fix it:

    .jet-woo-products .jet-woo-products__item {
    max-width: 23%  0!important; 
    }

    Best wishes

    Jennifer

    Perfect, thank you

    Amir Rather Support Team

    You’re most welcome Jennifer 🙂

Viewing 10 posts - 1 through 10 (of 10 total)
You must be logged in to reply to this topic.
Login