How do I remove the zoom icon that appears when hovering over image?

Question

I'm working on a site that uses this bootstrap theme. When the mouse hovers over any image a zoom icon appears - how do I remove it?

I have tried removing class="zoomIcon" and looked on this site as well as searching on Google.

HTML:

<div class="product-main-image-container">
  <img src="../../images/products/prod1.png" alt="" class="product-loader" style="display: none;">
  <span class="thumbnail product-main-image" style="position: relative; overflow: hidden;">
    <img src="../../images/products/prod1.png" alt="">
    <img src="../../images/products/prod1.png" class="zoomImg" 
         style="position: absolute; top: -0.0456852791878173px; left: -1.23350253807107px; opacity: 0; width: 400px; height: 400px; border: none; max-width: none; max-height: none;">
  </span>
</div>

Answer 1

You can add this to your CSS:

<style>
img:hover {
cursor: default;
}
</style>

I hope this helped you!

Answer 2

You can override this cursor behavior by either modifying the CSS that is making it happen (it looks like a CSS file called style.css) or by writing your own rule to make it stop.

The rule is on .product-main-image in line 432 of the style.css file, and to overwrite it, you would need a rule like this:

.product-main-image{cursor:default;} or any other cursor style you wish