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

heneedsumilk
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-{{ section.id }}"
data-section-id="{{ section.id }}"
data-section-type="product"
data-enable-history-state="true"
data-ajax-enabled="{{ settings.enable_ajax }}"
>

{% if product.handle == 'jungle-berry-kush'%}
<span class= "rocks">
<a href="https://the-happy-club-denmark.myshopify.com/products/cbd-moonrocks-60">
<img src="https://cdn.shopify.com/s/files/1/0559/2045/9973/files/rocks_poly2.jpg?v=1617627123"
width="110"
height="110"
align="right">
</a>
</span>

{% endif %}

{% if product.handle == 'moonrocks'%}
<span class= "buds">
<a href= "https://the-happy-club-denmark.myshopify.com/products/pineapple-example">
<img src="https://cdn.shopify.com/s/files/1/0559/2045/9973/files/buds_poly2.jpg?v=1617627062"
width= "110"
height= "110"
align="right">
</a>
<span>

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

0 Likes