I have problems getting this to work. I want to change image on mouseover/hoover but I cant get this to work.
<div class="image_wrapper">
<div class="image_main">
<a href="{{ url }}">
<img src="{% if product.images.size >= 1%}{{ product.featured_image | product_img_url: 'large' }}{% else %}{{ 'No_Image_2.png' | asset_url }}{% endif %}" alt="{{ product.title | escape }}" />
</a>
</div>
{% if product.images.size > 1 %}
<div class="image_main_hover">
<img class="hidden" src="{{ product.images[1] | product_img_url: 'large' }}" alt="{{ product.images[1].alt | escape }}" />
</div>
{% endif %}
2
Answers
This is what i did in a shopify store. I had to do this way cause his images were different in sizes but he want them all to be same size.
css
Edit your
product-thumbnail.liquid
Update below code:
And here is css: