Add zooming effect on toggle image

Highlighted
Excursionist
45 0 3

Hey guys, on my product pages, I'd like to add a zooming feature to my image inside the toogles cause it's too small to read.

image zoom toggle.PNG

 

Website: https://atelier17-boutique.com 
Password: atelier17

0 Likes
Highlighted

Hi there,
Jack from OpenThinking here!

It's easier to wrap your image around a <a> tag:

<a href="LINK OF SIZE GUIDE IMAGE" alt="Sizes" target="_blank">YOU IMG LINK HERE</a>

this will open your image in a new window.

Otherwise try putting the following code in you assets/theme.scss.liquid file at the very bottom

.product__content img:hover {
    transform: scale(2);
    z-index: 9999999;
    position: absolute;
}


let me know if this works for your. If yes; accept my answer and give me thumbs up! Thank you.

⚡️ [Shopify Themes]: Lightning-fast, Highly converting, SEO-optimized, Minimal.
⚡️ Need help with your store? [Get a quote]
0 Likes
Highlighted
Excursionist
45 0 3

Thanks a for your help @OpenThinking 
CSS isn't working really well as it doesn't display the full image.
About the link, I don't know where to put it, cause I can't edit html directly from my theme editor, and if I edit the toggle itself, I think the link is gonna appear on my 4 toggles, isn't?

0 Likes