Add hover effect to product images - Debut Theme

New Member
1 0 1

to solve the error of the price error of 19.99

Add ', variant: product' where the snippet is called 'product-price

 

before

{% include 'product-price' %}

 

now

{% include 'product-price', variant: product %}

1 Like
New Member
2 0 1

@chuss The price error is solved now, thank you! But I still have the problem with seeing all the product twice. One time with correct hover effect and one time without the hover effect. Can you maybe help me out? 

1 Like
New Member
1 0 0

Any ideas or fixes for disabling hover effect on mobile yet?

0 Likes
New Member
4 0 0

Thanks for the Price fix.

Trying to build on this. Anyone know how to add a transition delay to it? i tried plugging it in the CSS code we pasted.

Goal is to have it slowly delay instead of instantly switch to secondary image. 

0 Likes
Tourist
4 0 1

where can i put this code if i can not have product-card-grid.liquid in snippets? 

Please help asap!

i am using minimal, really want my pictures to hover.

0 Likes
Excursionist
22 2 8

Amy and Nadine!! THANK YOU SO MUCH!!! I was going insane looking for/attempting to produce a solution for this! Been awhile since I dove into HTML/CSS, this helped GREATLY!!!

0 Likes
New Member
1 0 1

I've tried this instead and it works just how I wanted it to, just made a few tweaks to fit our theme's original code.

 

Copy and paste this at the end of your theme.scss.liquid file:

(I recommend putting a note like <!-- code for image hovering --> before the code below -- just so it's easier for you or someone in your store next time that will modify the theme again what the codes are for.

 

 

/* ===============================================
// Reveal module
// =============================================== */
.has-secondary.grid-view-item__link img.secondary{
 display:none;
}

.has-secondary.grid-view-item__link:hover img.secondary{
 display:block;
}

.has-secondary.grid-view-item__link:hover img.grid-view-item__image{
 display:none;
}

@media screen and (min-width:767px){
.has-secondary.grid-view-item__link img.secondary{
 display:none;
}

.has-secondary.grid-view-item__link:hover img.secondary{
 display:block;
}

.has-secondary.grid-view-item__link:hover img.grid-view-item__image{
 display:none;
}
}

@media screen and (max-width:767px){
.has-secondary.grid-view-item__link img.secondary{
 display:none;
}
}

 

 

Next step, open your product-card-grid.liquid file and replace the whole code with this:

(I suggest you copy the old code to a notepad or something so you'll have a copy.)

 

 

{% unless grid_image_width %}
  {%- assign grid_image_width = '600x600' -%}
{% endunless %}
<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
  <a class="grid-view-item__link {% if product.images.size > 1 %} has-secondary{% endif %}" href="{{ product.url | within: collection }}">
    <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width }}" alt="{{ product.featured_image.alt }}">
    {% if product.images.size > 1 %}
     <img class="secondary" src="{{ product.images.last | img_url: grid_image_width }}" alt="{{ product.images.last.alt | escape }}">
    {% endif %}
    <div class="h4 grid-view-item__title">{{ product.title }}</div>
    {% if section.settings.show_vendor %}
      <div class="grid-view-item__vendor">{{ product.vendor }}</div>
    {% endif %}
    <div class="grid-view-item__meta">
      {% include 'product-price', variant: product %}
    </div>
  </a>
</div>

 

 

You can compare the old code to this one. Basically, the ones that were just replaced started from the <a> tag. You can see the has-secondary class which refers to the image that will appear when hovered.

 

You can replace product.images.last with product.images[1] if you want the second photo to display instead.

 

The tweaks that I have made is adding margin: 0 auto 15px; in the css code and adding scale to the product-card-grid so it matches the same size/style with my featured photo.

 

1 Like
New Member
2 0 0

aprilb You are amazing! Thank you! it works for me well!
only one little thing, I realised after using your code, the little space between the product image and product title is gone. May I ask is there a place in the code I can modify that? Thanks again!!!

0 Likes
Highlighted
New Member
1 0 1

Jaypong, to add space back in you can add something like this to your theme.css.liquid file:

 

.grid-view-item__title {
margin-top: 10px;
}
1 Like
New Member
2 0 0

Jakob, Thank you so much!! 

0 Likes