How To Add Zoom On Hover Animation on Product Page

[AryavK]

How to remove zoom in button and actually show the part where the cursor is/ zoom on hover

For example:

And:

Instead of:

store url: www.faithandyou.in

theme: refresh

[BSS-Commerce]

Hi @AryavK ,

Please follow these steps:

1. Delete the default zoom button, and delete the code content circled in red as shown below in the product-thumbnail.liquid file:

2. Add the codes circled in red below to the media-gallery.js file

// step 1
let image = document.querySelector(".product__media-list.contains-media.grid.grid--peek.list-unstyled.slider.slider--mobile .product__media.media.media--transparent img")

// step 2
image = activeMedia.querySelector('.product__media.media.media--transparent img')

// step 3
const ratio = 3
function mouseMove(e) {
  const rect = e.currentTarget.getBoundingClientRect()
  const offsetX = e.pageX - (rect.x + window.scrollX)
  const offsetY = e.pageY - (rect.y + window.scrollY)
  let { naturalHeight, naturalWidth } = image
  naturalHeight = naturalHeight * ratio
  naturalWidth = naturalWidth * ratio
    image.style.width = naturalWidth + 'px'
    image.style.height = naturalHeight + 'px'
    image.style.maxWidth = 'unset'
    const top = offsetY * (1 - naturalHeight / rect.height)
    const left = offsetX * (1 - naturalWidth / rect.width)
    image.style.top = top + 'px'
    image.style.left = left + 'px'
}

function mouseOut() {
  image.removeAttribute('style')
}

const x = document.querySelector(".product__media-list.contains-media.grid.grid--peek.list-unstyled.slider.slider--mobile")
x.addEventListener('mousemove', mouseMove)
x.addEventListener('mouseleave', mouseOut)

Tutorial: https://www.loom.com/share/d67ebf6050c04ab8a5b2478fb73f5b33

Hope it helps @AryavK

[AryavK]

anyway to make it less blurry and more sharp on hover @BSS-Commerce , pls reply quick, I plan to launch my store in 2 days