However, this effect is active only when the product image is quire large. I would like to know how can I set the threshold size or the minimum size required for a picture to get magnified upon hover. In other words, at the moment in order to get that magnification effect the product image has to be let's say at least 1100 x 1600 pixels. I would like to know how can I bring down this size to about 550 to 800 pixels.
See how when you hover on the main picture in product one, the picture gets zoomed and when you do the same in product two, nothing happens. I know the reason for this is the size of the featured image - in this case the size of the featured image in product one is twice the size of the featured image in product two. This tells me that there is a threshold value, which when passed allows the zoom effect on hover to be active. However not all of our pictures are of such large size and we need to find a way to bring down this value so that our smaller pictures get the same effect as well.
This is only possible if you reduce the Width of the Container the Image is in .
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
Hello,
We really like the magnification effect upon hover that can be seen here for example
https://excesswear.com/produkt/%d0%b4%d0%b0%d0%bc%d1%81%d0%ba%d0%b8-%d1%81%d0%bf%d0%be%d1%80%d1%82%d0%b5%d0%bd-%d0%ba%d0%be%d0%bc%d0%bf%d0%bb%d0%b5%d0%ba%d1%82-woman-sport-kit-drift-queen-%d0%ba%d0%bb%d0%b8%d0%bd-%d0%b1%d1%8e/
However, this effect is active only when the product image is quire large. I would like to know how can I set the threshold size or the minimum size required for a picture to get magnified upon hover. In other words, at the moment in order to get that magnification effect the product image has to be let's say at least 1100 x 1600 pixels. I would like to know how can I bring down this size to about 550 to 800 pixels.
Regards,
Stefan Dimov
Hey Sterasoft-new,
This should help: https://docs.woocommerce.com/document/fixing-blurry-product-images/ .
Thanks
ThemeNectar Support Team
Not really.
My issue is not the blurry pictures.
Compate those two:
1. https://excesswear.com/produkt/%d0%b4%d0%b0%d0%bc%d1%81%d0%ba%d0%b8-%d1%81%d0%bf%d0%be%d1%80%d1%82%d0%b5%d0%bd-%d0%ba%d0%be%d0%bc%d0%bf%d0%bb%d0%b5%d0%ba%d1%82-woman-sport-kit-drift-queen-%d0%ba%d0%bb%d0%b8%d0%bd-%d0%b1%d1%8e/
2. https://excesswear.com/produkt/%d0%b4%d0%b0%d0%bc%d1%81%d0%ba%d0%b8-%d1%81%d0%bf%d0%be%d1%80%d1%82%d0%b5%d0%bd-%d0%ba%d0%be%d0%bc%d0%bf%d0%bb%d0%b5%d0%ba%d1%82-woman-sport-kit-black-gold-%d0%ba%d0%bb%d0%b8%d0%bd-%d0%b1/
See how when you hover on the main picture in product one, the picture gets zoomed and when you do the same in product two, nothing happens. I know the reason for this is the size of the featured image - in this case the size of the featured image in product one is twice the size of the featured image in product two. This tells me that there is a threshold value, which when passed allows the zoom effect on hover to be active. However not all of our pictures are of such large size and we need to find a way to bring down this value so that our smaller pictures get the same effect as well.
Regards,
Stefan
Hey Again,
This is only possible if you reduce the Width of the Container the Image is in .
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
.single-product .product[data-gallery-style="ios_slider"] > .single-product-main-image { padding: 0 5% ; }Thanks
ThemeNectar Support Team