Search code examples
cssimagehoverweebly

How to disable the zoom effect on my product images?

I am using Weebly to create an online store, using a template and ran into something I dislike. Every time an user clicks on a product the product page comes up and if you hover over the product's image, a zoom function is initialized. How do I disable this effect?

I have a feeling that it is something simple like display:none; but I can't seem to figure out which class or whatever is associated with it.

Solution

  • The simple way is to hide the element that is placed over the image on hover via CSS:

    .cloud-zoom-big,
#cloud-zoom-big {
  display: none !important;
}

    or

    .mousetrap {
  display: none !important;
}

    The better way would be to disable the JavaScript, that is calculating the effect. It's located in your http://cdn2.editmysite.com/js/site/commerce-core.js at the beginning of the file. But this file is minimized, so its hard to remove the relevant code.