Image hover effect with AT WooCommerce widgets

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!