How to link html to css( make image zoom on hover)

New Member
2 0 0

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:


<div class="product-template__container page-width"
id="ProductSection-{{ }}"
data-section-id="{{ }}"
data-ajax-enabled="{{ settings.enable_ajax }}"

{% if product.handle == 'jungle-berry-kush'%}
<span class= "rocks">
<a href="">
<img src=""

{% endif %}

{% if product.handle == 'moonrocks'%}
<span class= "buds">
<a href= "">
<img src=""
width= "110"
height= "110"

{% 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