orginal image in background click and hover function

[martijn18]

Hi, when I am using the click and hover function on the product image on the product page, the original (non-zoomed) image is still in the background, which is quite disturbing. How can I adjust it such that the non-zoomed image disappears when you are zooming in on the product image?

Page URL: https://marwijn.com/products/selection-chardonnay-pinot-gris-dropia

[tim]

Here is the rule to paste into "Custom CSS" setting of the product info section:

.image-magnify-full-size + .image-magnify-hover {
  visibility: hidden;
} 

[tim]

I do not recommend editing theme code for CSS rules like these. 

It would significantly complicate theme updates later.

I believe 99% of CSS fixes can be done either inside sections "Custom CSS" and (sometimes) with "Custom CSS" in Theme settings.

[martijn18]

Yes, I completely agree with you on that. Appreciate the help!

[martijn18]

For some reason it works in the editor, but it does not allow me to save the theme. The code of 'Namphan' did allow me to save it though...

[tim]

hmm. for real. it now does not like visibility. must be a bug -- it was ok before.

[namphan · Accepted solution]

Hi @martijn18,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.image-magnify-full-size + .image-magnify-hover {
    opacity: 0 !important;
}