WooCommerce: Product Image Zoom-on-Hover

.woocommerce-product-gallery__image {
    overflow: hidden;
    border-radius: 4px;
}
.woocommerce-product-gallery__image img {
    transition: transform .4s ease;
    transform-origin: center center;
    will-change: transform;
    display: block;
}
@media (hover: hover) {
    .woocommerce-product-gallery__image:hover img,
    .woocommerce-product-gallery__image:focus-within img {
        transform: scale(1.08);
    }
}

(function () {
    // On touch-capable devices without fine pointer, remove the zoom
    // class so the CSS media-query still applies, but suppress the
    // WooCommerce zoom plugin overlay which conflicts with our transform.
    if (!window.matchMedia('(hover: hover)').matches) { return; }
    document.addEventListener('DOMContentLoaded', function () {
        var gallery = document.querySelector('.woocommerce-product-gallery');
        if (!gallery) { return; }
        // The WC zoom trigger icon can conflict — hide it when our zoom is active
        var trigger = gallery.querySelector('.woocommerce-product-gallery__trigger');
        if (trigger) {
            trigger.style.display = 'none';
        }
    });
}());