justinpees justinpees - 1 year ago 102
CSS Question

How to disable the zoom effect on my product images?

I am using Weebly to create an online store, using a template a ran into something I dislike. Every time a 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. Can someone please find it for me?

Here is the link where you can find the hover effect issue:


Thanks in advance, (It's making me go nuts!)

Answer Source

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

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


.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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download