Hello there, on my product page I added a small image that redirects to another similar product. I added the image as html in product-template.liquid, and added some basic styling within the img tag. I wanted to make the image zoom when the cursor hovers over it, to let people know it’s interactive, but no matter what I do it doesn’t work..
Here are the first 30 lines of my product-template.liquid:
{% if product.handle == ‘jungle-berry-kush’%}
{% endif %}
{% if product.handle == ‘moonrocks’%}
{% endif %}
As you can see I added two classes (class=“rocks” and class=“buds”) redirecting to the respective product page. But how do I link these classes to a .css file? Is it smartest to create a new .css file in assets and link the classes? or can I make the zoom-effect directly in the product-template.liquid? all I know is that I’m having a bit of problems using the class:hover {} expression in product-template.liquid. I’m not so familiar with html and css, and liquid is just straight up confusing - but I do have a bit of coding experience in object-oriented languages.
Plz Help :)) fank u