I’m trying to make the single product page image sticky and have tried targeting many different classes but nothing works.

Here’s what i have tried :

    #content div.product div.images, 
    div.product div.images, 
    #content div.product div.images, 
    div.product div.images,
    .woocommerce-product-gallery img,
    img, 
    .wp-post-image,
    .woocommerce-product-gallery__wrapper,
    .woocommerce-product-gallery__image,
    .woocommerce-main-image {
        position: sticky!important;
}

Maybe there’s some inline jQuery which is over riding.

Here’s is the HTML :

    <div class="woocommerce-product-gallery woocommerce-product-gallery--with-images woocommerce-product-gallery--columns-4 images" data-columns="4" style="opacity: 1; transition: opacity 0.25s ease-in-out 0s;"><a href="#" class="woocommerce-product-gallery__trigger"><img draggable="false" role="img" class="emoji" alt="????" src="https://s.w.org/images/core/emoji/15.0.3/svg/1f50d.svg"></a>
<div class="woocommerce-product-gallery__wrapper">
<div data-thumb="http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310-600x542.jpeg" data-thumb-alt="" class="woocommerce-product-gallery__image" style="position: relative; overflow: hidden;" data-o_data-thumb="http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310-100x100.jpeg"><a href="http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310.jpeg" data-o_href="http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310.jpeg"><img width="600" height="542" src="https://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310-600x542.jpeg" class="wp-post-image" alt="imac-24-no-id-blue-cto-hero-202310" title="imac-24-no-id-blue-cto-hero-202310" data-caption="" data-src="https://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310.jpeg" data-large_image="http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310.jpeg" data-large_image_width="1254" data-large_image_height="1132" decoding="async" fetchpriority="high" srcset="http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310-600x542.jpeg 600w, http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310-300x271.jpeg 300w, http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310-1024x924.jpeg 1024w, http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310-768x693.jpeg 768w, http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310-1200x1083.jpeg 1200w, http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310.jpeg 1254w" sizes="(max-width: 600px) 100vw, 600px" data-o_src="https://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310-600x542.jpeg" data-o_height="542" data-o_width="600" data-o_srcset="http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310-600x542.jpeg 600w, http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310-300x271.jpeg 300w, http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310-1024x924.jpeg 1024w, http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310-768x693.jpeg 768w, http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310-1200x1083.jpeg 1200w, http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310.jpeg 1254w" data-o_sizes="(max-width: 600px) 100vw, 600px" data-o_title="imac-24-no-id-blue-cto-hero-202310" data-o_data-caption="" data-o_alt="" data-o_data-src="https://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310.jpeg" data-o_data-large_image="http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310.jpeg" data-o_data-large_image_width="1254" data-o_data-large_image_height="1132"></a><img role="presentation" alt="imac-24-no-id-blue-cto-hero-202310" src="https://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310.jpeg" class="zoomImg" style="position: absolute; top: -151.952px; left: -350.462px; opacity: 1; width: 1254px; height: 1132px; border: none; max-width: none; max-height: none; display: block;"></div> </div>
</div>

How do i use CSS or jQuery to make the product page image sticky on the single woocommerce product page?

I tried targeting multiple classes using position: sticky; but none work. I need the image to stay fixed on scroll. I see this question asked here but not answered Sticky product summary on Woocommerce single product page

Is this possible without editing the HTML?