Image hover effect with AT WooCommerce widgets - Acme Themes

Best Premium and Free WordPress Themes Forums Online Shop Image hover effect with AT WooCommerce widgets

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #93507
    catrin
    Participant

    Hi!

    I would like to add image zoom-in hover effect with AT WooCommerce widgets and I got the code nicely working with AT WooCommerce Products widget with this code:

    .woocommerce ul.products li.product {
        position: relative;
        overflow: hidden;
    }
    .woocommerce ul.products li.product a img {
        max-width: 100%;
        transition: all 0.3s;
        display: block;
        width: 100%;
        height: auto;
        transform: scale(1);
    }
    .woocommerce ul.products li.product:hover a img {
    transform:scale(1.05);
    -ms-transform:scale(1.05);
    -moz-transform:scale(1.05);
    -webkit-transform:scale(1.05);
    -o-transform:scale(1.05);
    opacity:0.75;
    }

    But similar code doesn’t seem to work with AT WooCommerce Categories because the background image isn’t img so this does nothing:

    .wc-cat-feature .single-unit:hover img {
        transform: scale(1.2);
    }

    Though this works well with the title:

    .wc-cat-feature .single-unit:hover h3 {
        transform: scale(1.2);
    }

    When I don’t add img then the dimensions change but I would like only the image to zoom in.

    Could anybody please help me with this? 🙂

    Thank you in advance!

    #93555
    acmethemes
    Keymaster

    Dear Catrin,
    If you can provide us your site URL, we will observe and can provide you with possible solutions.
    Best Regards!

    • This reply was modified 3 years, 1 month ago by acmethemes.
    • This reply was modified 3 years, 1 month ago by acmethemes.
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.